iceholidays-frontend 0.1.0 → 0.2.0

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

@@ -14,7 +14,9 @@
  *= 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");
+
+ $font-default: Poppins, san-serif;
 
  .ant-tabs >.ant-tabs-nav{
   margin: 0;
@@ -40,7 +42,7 @@
 
     .ant-tabs-tab-btn {
       text-transform: uppercase;
-      font-family: Poppins;
+      font-family: $font-default;
       font-size: 20px;
       font-weight: 400;
       line-height: 30px;
@@ -127,6 +129,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 +153,7 @@ body{
   left: 568px;
   gap: 0px;
   opacity: 0px;
-  z-index: 1;
+  z-index: 2;
 }
 
 #right-menu{
@@ -173,7 +184,7 @@ body{
 }
 
 #get-brochure span{
-  font-family: Poppins;
+  font-family: $font-default;
   font-size: 14px;
   font-weight: 500;
   line-height: 21px;
@@ -193,17 +204,66 @@ 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);
@@ -231,7 +291,7 @@ body{
 }
 
 #tagline span{
-  font-family: Poppins;
+  font-family: $font-default;
   font-size: 45px;
   font-weight: 600;
   line-height: 69px;
@@ -250,7 +310,7 @@ body{
 }
 
 #popular-destinations h1{
-  font-family: Poppins;
+  font-family: $font-default;
   font-size: 45px;
   font-weight: 200;
   line-height: 67.5px;
@@ -263,7 +323,7 @@ body{
 
 
 .top-cities h2{
-  font-family: Poppins;
+  font-family: $font-default;
   font-size: 30px;
   font-weight: 600;
   line-height: 45px;
@@ -317,7 +377,7 @@ body{
 }
 
 .city-details .city-name{
-  font-family: Poppins;
+  font-family: $font-default;
 font-size: 20px;
 font-weight: 400;
 line-height: 30px;
@@ -330,7 +390,7 @@ color: #FFFFFF;
 }
 
 .city-details .tour-count{
-  font-family: Poppins;
+  font-family: $font-default;
 font-size: 14px;
 font-weight: 400;
 line-height: 21px;
@@ -394,7 +454,7 @@ cursor: pointer;
 }
 
 #testimonial #testimonial-header>span{
-  font-family: Poppins;
+  font-family: $font-default;
   font-size: 45px;
   font-weight: 200;
   line-height: 67.5px;
@@ -462,7 +522,7 @@ height: 26.5px;
 
 }
 .itinerary-summary span{
-  font-family: Poppins;
+  font-family: $font-default;
 font-size: 12px;
 font-weight: 500;
 line-height: 18px;
@@ -475,7 +535,7 @@ color: #AA853E;
 }
 
 .comment span{
-  font-family: Poppins;
+  font-family: $font-default;
   font-size: 14px;
   font-style: italic;
   font-weight: 200;
@@ -487,7 +547,7 @@ color: #AA853E;
 }
 
 .customer-name span{
-  font-family: Poppins;
+  font-family: $font-default;
 font-size: 20px;
 font-weight: 400;
 line-height: 30px;
@@ -498,7 +558,7 @@ 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 +574,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 +627,7 @@ text-decoration-skip-ink: none;
     }
 
     .city-name{
-      font-family: Poppins;
+      font-family: $font-default;
       font-size: 20px;
       font-weight: 400;
       line-height: 30px;
@@ -580,7 +640,7 @@ text-decoration-skip-ink: none;
 
     .tour-count{
       width: 40px;
-      font-family: Poppins;
+      font-family: $font-default;
       font-size: 12px;
       font-weight: 400;
       line-height: 21px;
@@ -607,7 +667,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 +706,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 +734,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 +763,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 +801,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 +836,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/javascript/react/components/Destinations.tsx

@@ -1,48 +1,71 @@
 import { Tabs, TabsProps } from "antd";
 import React from "react";
+import africa from "../../../assets/images/iceholidays/frontend/africa.png";
+
+import kenya from "../../../assets/images/iceholidays/frontend/kenya.png";
+import kenya2 from "../../../assets/images/iceholidays/frontend/kenya2.png";
+import southafrica from "../../../assets/images/iceholidays/frontend/southafrica.png";
+
+import tanzania from "../../../assets/images/iceholidays/frontend/tanzania.png";
+import uganda from "../../../assets/images/iceholidays/frontend/uganda.png";
+
+import china from "../../../assets/images/iceholidays/frontend/china.png";
+import china2 from "../../../assets/images/iceholidays/frontend/china2.png";
+import chongqing from "../../../assets/images/iceholidays/frontend/chongqing.png";
+import guangzhou from "../../../assets/images/iceholidays/frontend/guangzhou.png";
+
+import frame71 from "../../../assets/images/iceholidays/frontend/Frame71.png";
+import guilin from "../../../assets/images/iceholidays/frontend/guilin.png";
+import hongkong from "../../../assets/images/iceholidays/frontend/hongkong.png";
+import harbin from "../../../assets/images/iceholidays/frontend/harbin.png";
+import inner_mongolia from "../../../assets/images/iceholidays/frontend/inner_mongolia.png";
+import jiangxi from "../../../assets/images/iceholidays/frontend/jiangxi.png";
+import kunming from "../../../assets/images/iceholidays/frontend/kunming.png";
+import slikroad from "../../../assets/images/iceholidays/frontend/slikroad.png";
+
 
 const countries = [
   {
     name: "Africa",
-    image: "africa.png",
-    image2: "africa2.png",
+    image: africa,
+    image2: africa,
     topCities: [{
       name: "Kenya", 
-      image: "kenya.png",
-      image2: "kenya2.png",
+      image: kenya,
+      image2: kenya2,
     },
     {
       name: "South Africa", 
-      image: "southafrica.png",
+      image: southafrica,
     },
     {
       name: "Tanzania", 
-      image: "tanzania.png",
+      image: tanzania,
     },
     {
       name: "Uaganda",
-      image: "uganda.png",
+      image: uganda,
     }]
   },
   {
     name: "China",
-    image: "china.jpeg",
-    image2: "china2.png",
+    image: china,
+    image2: china2,
     topCities: [{
       name: "Chong Qing",
-      image: "chongqing.png",
+      image: chongqing,
     },
     {
       name: "Guangzhou", 
-      image: "guangzhou.png",
+      image: guangzhou,
     },
     {
       name: "Guilin", 
-      image: "guilin.png",
+      image: guilin,
     },
     {
       name: "Hongkong", 
-      image: "hongkong.png",
+      image: hongkong,
     }],
     moreCities: [
       "Leizhou", "Ningxia", "Qinghai", "Shanghai", "Tibet", "Xiamen", "Yunnan"
@@ -50,23 +73,23 @@ const countries = [
     tours: [
       {
         name: "Harbin",
-        image: "harbin.png",
+        image: harbin,
       },
       {
         name: "Inner Mongolia",
-        image: "inner_mongolia.png",
+        image: inner_mongolia,
       },
       {
         name: "Jiangxi",
-        image: "jiangxi.png",
+        image: jiangxi,
       },
       {
         name: "Kun Ming",
-        image: "kunming.png",
+        image: kunming,
       },
       {
         name: "Silk Road",
-        image: "slikroad.png",
+        image: slikroad,
       }
     ]
   },
@@ -100,11 +123,11 @@ 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}`}
+                onMouseOver={e => (e.currentTarget.src = `${country.image2}`)}
+                onMouseOut={e => (e.currentTarget.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={frame71}></img>
             </div>
             {
               country.topCities?.length && 
@@ -116,9 +139,9 @@ function Destinations(){
                       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}`)}/>
+                          src={`${city.image}`}
+                          onMouseOver={e => (e.currentTarget.src = `${city.image2}`)}
+                          onMouseOut={e => (e.currentTarget.src = `${city.image}`)}/>
                         <div className="city-details">
                           <span className="city-name">{city.name}</span>
                           <span className="tour-count">1 Tour</span>
@@ -150,7 +173,7 @@ 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>

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

@@ -1,21 +1,40 @@
-import { Carousel, Image } from "antd";
+import { Button, Carousel, DatePicker, Form, Image, Input, Space } from "antd";
 import React from "react";
-import banner1 from "../../../assets/images/iceholidays/frontend/banner1.png"
-import banner2 from "../../../assets/images/iceholidays/frontend/banner2.png"
+import banner1 from "../../../assets/images/iceholidays/frontend/banner1.png";
+import banner2 from "../../../assets/images/iceholidays/frontend/banner2.png";
+import reactangle from "../../../assets/images/iceholidays/frontend/Rectangle49.png";
+
 const banners = [
-  {file: banner2},
+  {file: banner1},
   {file: banner2},
 ]
 
+
 function HomepageBanner(){
+  const [form] = Form.useForm();
   return (
     <div id="cover"> 
       <div id="search-bar">
-        {/* <%=image_tag("iceholidays/frontend/Rectangle49.png")%> */}
+        <img src={reactangle}/>
         <div id="search-bar-widget">
-          sample1
+          <Form
+            form={form}
+            layout="vertical"
+          >
+            <Space align="end">
+              <Form.Item label="Search">
+                <Input placeholder="Destinations, Attractions, etc" />
+              </Form.Item>
+              <Form.Item label="Travel Period">
+                <DatePicker picker="month" />
+              </Form.Item>
+              <Form.Item>
+                <Button type="primary" className="search-button">Search</Button>
+              </Form.Item>
+            </Space>
+          </Form>
         </div>
-        {/* <%=image_tag("iceholidays/frontend/Rectangle49.png", class: "flip")%> */}
+        <img src={reactangle} className="flip"/>
       </div>
       <div>
         <Carousel autoplay arrows>

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

@@ -1,6 +1,8 @@
 import { Carousel } from "antd";
 import React from "react";
 
+import star5 from "../../../assets/images/iceholidays/frontend/5star.png";
+import layer1 from "../../../assets/images/iceholidays/frontend/Layer_1.png";
 const contentStyle: React.CSSProperties = {
   height: '160px',
   color: '#fff',
@@ -33,7 +35,7 @@ const reviews = [
 function Testimonials(){
   return (
     <div id="testimonial">
-      <div id="testimonial-header" style={{backgroundImage: 'url("/dev-assets/iceholidays/frontend/Layer_1.png")'}}>
+      <div id="testimonial-header" style={{backgroundImage: "url("+ layer1+")"}}>
         <span>Testimonial</span>
       </div>
 
@@ -43,7 +45,7 @@ function Testimonials(){
             reviews?.map((review)=>{
               return (
                 <div key={review.key} className="testimonial">
-                  <img src="/dev-assets/iceholidays/frontend/5star.png" className="stars-icon"/>
+                  <img src={star5} className="stars-icon"/>
                   <div className="itinerary-summary">
                     <span> {review.itinerarySummary} </span>
                   </div>

data/lib/iceholidays/frontend/version.rb

@@ -1,5 +1,5 @@
 module Iceholidays
   module Frontend
-    VERSION = "0.1.0"
+    VERSION = "0.2.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: iceholidays-frontend
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Vhilly Santiago
@@ -77,11 +77,31 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
+- app/assets/builds/iceholidays/frontend/5star-GEMYV5WA.digested.png
+- app/assets/builds/iceholidays/frontend/Frame71-U6FKYUGB.digested.png
+- app/assets/builds/iceholidays/frontend/Layer_1-24HTXUKI.digested.png
+- app/assets/builds/iceholidays/frontend/Rectangle49-SVQRLXW6.digested.png
+- app/assets/builds/iceholidays/frontend/africa-HBPEOBHM.digested.png
 - app/assets/builds/iceholidays/frontend/application.js
 - app/assets/builds/iceholidays/frontend/application.js.map
-- app/assets/builds/iceholidays/frontend/banner01-MY5H645U.digested.png
-- app/assets/builds/iceholidays/frontend/banner02-2GQQYFI3.digested.png
+- app/assets/builds/iceholidays/frontend/banner1-OM6SQ5GW.digested.png
 - app/assets/builds/iceholidays/frontend/banner2-BWOLYVUE.digested.png
+- app/assets/builds/iceholidays/frontend/china-DX6D6FE2.digested.png
+- app/assets/builds/iceholidays/frontend/china2-FESATHUH.digested.png
+- app/assets/builds/iceholidays/frontend/chongqing-CCJWJDUN.digested.png
+- app/assets/builds/iceholidays/frontend/guangzhou-JGSVPIYY.digested.png
+- app/assets/builds/iceholidays/frontend/guilin-AXXU7K32.digested.png
+- app/assets/builds/iceholidays/frontend/harbin-2YJL7HHH.digested.png
+- app/assets/builds/iceholidays/frontend/hongkong-IPUEZ35P.digested.png
+- app/assets/builds/iceholidays/frontend/inner_mongolia-EURVGQVT.digested.png
+- app/assets/builds/iceholidays/frontend/jiangxi-DTEOQGIY.digested.png
+- app/assets/builds/iceholidays/frontend/kenya-F5ZJOIBS.digested.png
+- app/assets/builds/iceholidays/frontend/kenya2-CCJWJDUN.digested.png
+- app/assets/builds/iceholidays/frontend/kunming-OCHNG2UW.digested.png
+- app/assets/builds/iceholidays/frontend/slikroad-CVUSDDRO.digested.png
+- app/assets/builds/iceholidays/frontend/southafrica-HBPEOBHM.digested.png
+- app/assets/builds/iceholidays/frontend/tanzania-VJSRMTCY.digested.png
+- app/assets/builds/iceholidays/frontend/uganda-H4JWFN3A.digested.png
 - app/assets/config/iceholidays_frontend_manifest.js
 - app/assets/images/iceholidays/frontend/5star.png
 - app/assets/images/iceholidays/frontend/Frame71.png
@@ -93,7 +113,7 @@ files:
 - app/assets/images/iceholidays/frontend/africa.png
 - app/assets/images/iceholidays/frontend/banner1.png
 - app/assets/images/iceholidays/frontend/banner2.png
-- app/assets/images/iceholidays/frontend/china.jpeg
+- app/assets/images/iceholidays/frontend/china.png
 - app/assets/images/iceholidays/frontend/china2.png
 - app/assets/images/iceholidays/frontend/chongqing.png
 - app/assets/images/iceholidays/frontend/cover_img.jpeg