iceholidays-frontend 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 883ac208fd84d5913b7a11430f4ee361e446968737f5d25d8a20cb06ce9bb76a
-  data.tar.gz: 85e60418b9cd8827c34bc37ff8c77da7ccddcef45a03ad2b76787444a5bec459
+  metadata.gz: 863654c2cf6a12a64a30d7ac313c3b3151e6772ba2f6fcfc6aa2160391dcc8bd
+  data.tar.gz: ec1f0394c55a0bc6a474ae0a96cbc5cca1e309d2e2f756437f7f615935f641f9
 SHA512:
-  metadata.gz: c3db3f6b1cd2c89b960bfff199fb7d7f79f75a9d32fa82cb1f01ec574171326e83b247ef21189c8f0aebefe0e325cb489802b6f8994f2551840dac9fe1ed1d18
-  data.tar.gz: dc8f91e8822acbf56d0fbdcb4252d73098a74078c73cf1a5f8ad3e370e661bb4c8c1953da3de18a853af31fb40eaf90240fdcbe4672b32ac5bf9bde5c9a7ca6c
+  metadata.gz: 903ac5ecac661c1062d2547570706c1965e1a1ca0d260167f91158442d49f05a6ba4bd00e4127726e988519718582d0d48692d5b9007a223f5b82bbd83a10e89
+  data.tar.gz: d9818be7bb909eaeb97d3b5693654c0b7c145602681916cfcd3aeab7979ca8ef2c0e39e990b54127e92442a806424e408f568ffe728bc96fefd92c839dfa5093

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

@@ -15,6 +15,7 @@
  */
 
  @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;
 
@@ -68,7 +69,7 @@
 display: unset !important;
 width: 100% !important;
 }
-  
+
 
 [class~='ant-carousel'] {
   [class~='slick-dots'] {
@@ -96,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{
@@ -269,7 +281,7 @@ body{
   transform: scaleX(-1);
 }
 
-#cover{
+#homepage-banner{
   width: 1440px;
   height: 760px;
   gap: 0px;
@@ -277,6 +289,19 @@ body{
   opacity: 0px;
   /* position: relative; */
 
+
+
+[class~='ant-carousel'] {
+  .slick-prev{
+    inset-inline-start: 115px;
+  }
+  .slick-next{
+    inset-inline-end: 115px;
+  }
+ 
+}
+
+
 }
 
 #tagline{
@@ -343,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{
@@ -403,10 +436,6 @@ cursor: pointer;
 
 }
 
-.city-details .tour-count:hover{
-  text-decoration: underline;
-}
-
 .country-info {
   position: relative;
 
@@ -478,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{
@@ -511,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;
   
   
@@ -530,6 +570,8 @@ text-align: left;
 text-underline-position: from-font;
 text-decoration-skip-ink: none;
 color: #AA853E;
+width: 100%;
+display: block;
 
 
 }
@@ -546,16 +588,28 @@ color: #AA853E;
   
 }
 
-.customer-name 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;
+.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: $font-default;
@@ -639,7 +693,7 @@ text-decoration-skip-ink: none;
     }
 
     .tour-count{
-      width: 40px;
+      width: 45px;
       font-family: $font-default;
       font-size: 12px;
       font-weight: 400;

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,95 +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";
-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,
-    image2: africa,
+    image: "iceholidays-assets/images/africa.png",
     topCities: [{
-      name: "Kenya", 
-      image: kenya,
-      image2: kenya2,
+      name: "Kenya",       
+      image: "iceholidays-assets/images/kenya.png",
     },
     {
-      name: "South Africa", 
-      image: southafrica,
+      name: "South Africa",             
+      image: "iceholidays-assets/images/southafrica.png",
     },
     {
       name: "Tanzania", 
-      image: tanzania,
+      image: "iceholidays-assets/images/tanzania.png",
     },
     {
-      name: "Uaganda",
-      image: uganda,
+      name: "Uaganda",      
+      image: "iceholidays-assets/images/uganda.png",
     }]
   },
   {
-    name: "China",
-    image: china,
-    image2: china2,
+    name: "China",    
+    image: "iceholidays-assets/images/china.png",
     topCities: [{
       name: "Chong Qing",
-      image: chongqing,
+      image: "iceholidays-assets/images/china.png",
     },
     {
       name: "Guangzhou", 
-      image: guangzhou,
+      image: "iceholidays-assets/images/guangzhou.png",
     },
     {
-      name: "Guilin", 
-      image: guilin,
+      name: "Guilin",       
+      image: "iceholidays-assets/images/guilin.png",
     },
     {
-      name: "Hongkong", 
-      image: hongkong,
+      name: "Hongkong",       
+      image: "iceholidays-assets/images/hongkong.png",
     }],
     moreCities: [
       "Leizhou", "Ningxia", "Qinghai", "Shanghai", "Tibet", "Xiamen", "Yunnan"
     ],
     tours: [
       {
-        name: "Harbin",
-        image: harbin,
+        name: "Harbin",        
+        image: "iceholidays-assets/images/harbin.png",
       },
       {
-        name: "Inner Mongolia",
-        image: inner_mongolia,
+        name: "Inner Mongolia",        
+        image: "iceholidays-assets/images/inner_mongolia.png",
       },
       {
-        name: "Jiangxi",
-        image: jiangxi,
+        name: "Jiangxi",        
+        image: "iceholidays-assets/images/jiangxi.png",
       },
       {
-        name: "Kun Ming",
-        image: kunming,
+        name: "Kun Ming",        
+        image: "iceholidays-assets/images/kunming.png",
       },
       {
-        name: "Silk Road",
-        image: slikroad,
+        name: "Silk Road",        
+        image: "iceholidays-assets/images/slikroad.png",
       }
     ]
   },
@@ -123,11 +99,9 @@ function Destinations(){
           <div>
             <div className="country-info">
               <img className="country-image" 
-                src={`${country.image}`}
-                onMouseOver={e => (e.currentTarget.src = `${country.image2}`)}
-                onMouseOut={e => (e.currentTarget.src = `${country.image}`)}/>
+                src={`${country.image}`} />
               <h1 className="country-name"> {country.name} </h1>
-              <img className="bottom-logo" src={frame71}></img>
+              <img className="bottom-logo" src="iceholidays-assets/images/Frame71.png"></img>
             </div>
             {
               country.topCities?.length && 
@@ -138,13 +112,10 @@ function Destinations(){
                     country.topCities?.map((city, index)=>{
                       return (
                         <div key={index} className="city-cover">
-                        <img 
-                          src={`${city.image}`}
-                          onMouseOver={e => (e.currentTarget.src = `${city.image2}`)}
-                          onMouseOut={e => (e.currentTarget.src = `${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>
                       )
@@ -176,7 +147,7 @@ function Destinations(){
                       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/>

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

@@ -1,21 +1,19 @@
 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 reactangle from "../../../assets/images/iceholidays/frontend/Rectangle49.png";
+import SlickButtonFix from "./shared/SlickButtonFix";
 
 const banners = [
-  {file: banner1},
-  {file: banner2},
+  {file: 'iceholidays-assets/images/banner1.png'},
+  {file: 'iceholidays-assets/images/banner2.png'},
 ]
 
-
 function HomepageBanner(){
   const [form] = Form.useForm();
+
   return (
-    <div id="cover"> 
+    <div id="homepage-banner"> 
       <div id="search-bar">
-        <img src={reactangle}/>
+        <img src="iceholidays-assets/images/Rectangle49.png"/>
         <div id="search-bar-widget">
           <Form
             form={form}
@@ -34,10 +32,20 @@ function HomepageBanner(){
             </Space>
           </Form>
         </div>
-        <img src={reactangle} className="flip"/>
+        <img src="iceholidays-assets/images/Rectangle49.png" className="flip"/>
       </div>
       <div>
-        <Carousel autoplay arrows>
+        <Carousel autoplay arrows
+          prevArrow={
+            <SlickButtonFix>
+              <img src="iceholidays-assets/images/banner_arrow.png"/>
+            </SlickButtonFix>
+          }
+          nextArrow={
+            <SlickButtonFix>
+              <img src="iceholidays-assets/images/banner_arrow.png" className="flip"/>
+            </SlickButtonFix>
+          }>
           {
             banners?.map((image, index)=>{
               return (

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

@@ -1,8 +1,12 @@
+import { faPenNib } from "@fortawesome/free-solid-svg-icons/faPenNib";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Carousel } from "antd";
 import React from "react";
+import SlickButtonFix from "./shared/SlickButtonFix";
+import { faCaretLeft } from "@fortawesome/free-solid-svg-icons/faCaretLeft";
+import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
+
 
-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',
@@ -14,45 +18,61 @@ const contentStyle: React.CSSProperties = {
 const reviews = [
   {
     key: 1,
-    itinerarySummary: "8D6N 8D6N PREMIUM KOREA: <br/> SPLENDOR OF WINTER",
+    itinerarySummaryTitle: "8D6N 8D6N PREMIUM KOREA:",
+    itinerarySummaryDesc: "SPLENDOR OF WINTER",
     comment: "Thanks to our exceptional guide ANDY & MEILAN. 👍👍👍The Korea tour was fantastic,Their deep knowledge and engaging style made the experience truly memorable. Highly recommend for anyone wanting an insightful and enjoyable tour of Korea!🇰🇷 …",
     customerName: "Evon Ooi"
   },
   {
     key: 2,
-    itinerarySummary: "review 2",
+    itinerarySummaryTitle: "review 2",
     comment: "Thanks to our exceptional guide ANDY & MEILAN. 👍👍👍The Korea tour was fantastic,Their deep knowledge and engaging style made the experience truly memorable. Highly recommend for anyone wanting an insightful and enjoyable tour of Korea!🇰🇷 …",
     customerName: "Evon Ooi"
   },
   {
     key: 3,
-    itinerarySummary: "review 3",
+    itinerarySummaryTitle: "review 3",
     comment: "Thanks to our exceptional guide ANDY & MEILAN. 👍👍👍The Korea tour was fantastic,Their deep knowledge and engaging style made the experience truly memorable. Highly recommend for anyone wanting an insightful and enjoyable tour of Korea!🇰🇷 …",
     customerName: "Evon Ooi"
-  }
+  },
 ]
 
 function Testimonials(){
   return (
     <div id="testimonial">
-      <div id="testimonial-header" style={{backgroundImage: "url("+ layer1+")"}}>
+      <div id="testimonial-header" style={{backgroundImage: "url('iceholidays-assets/images/Layer_1.png')"}}>
         <span>Testimonial</span>
       </div>
 
       <div id="testimonials">
-        <Carousel arrows slidesToScroll= {1} slidesToShow={3}>
+        <Carousel autoplay arrows dots={false} draggable slidesToScroll= {1} slidesToShow={3}
+          prevArrow={
+            <SlickButtonFix>
+              <FontAwesomeIcon icon={faCaretLeft} size="4x"/>
+            </SlickButtonFix>
+          }
+          nextArrow={
+            <SlickButtonFix>
+              <FontAwesomeIcon icon={faCaretRight} size="4x"/>
+            </SlickButtonFix>
+          }>
           {
             reviews?.map((review)=>{
               return (
                 <div key={review.key} className="testimonial">
-                  <img src={star5} className="stars-icon"/>
+                  <img src="iceholidays-assets/images/5star.png" className="stars-icon"/>
                   <div className="itinerary-summary">
-                    <span> {review.itinerarySummary} </span>
+                    <img src="iceholidays-assets/images/logomark.png" className="st-logo"/>
+                    <div>
+                      <span> {review.itinerarySummaryTitle} </span>
+                      <span> {review.itinerarySummaryDesc} </span>
+                    </div>
                   </div>
                   <div className="comment">
                     <span>{review.comment}</span>
                   </div>
                   <div className="customer-name">
+                    <FontAwesomeIcon icon={faPenNib} className="author-icon" />
                     <span>{review.customerName}</span>
                   </div>
                 </div>

data/app/javascript/react/components/shared/SlickButtonFix.tsx

@@ -0,0 +1,19 @@
+import React, { JSX } from "react";
+
+
+const SlickButtonFix = (
+  props: {
+    children: JSX.Element;
+    slideCount?: number;
+    currentSlide?: number;
+  }
+) => {
+  const { children, currentSlide, slideCount, ...others } = props;
+  return (
+    <span {...others}>
+      {children}
+    </span>
+  );
+};
+
+export default SlickButtonFix;

data/app/views/iceholidays/frontend/site/index.html.erb

@@ -1,22 +1,22 @@
 <%= react_component "Homepage"%>
 
 
-<div id="about-signature-tours" style="background: url(<%=asset_path('iceholidays/frontend/about_st_bg.png')%>) no-repeat 70% 7%, linear-gradient(65.77deg, rgba(170, 133, 62, 0.5) 33.44%, rgba(249, 225, 151, 0.5) 67.37%)">
+<div id="about-signature-tours" style="background: url(<%=asset_path('/iceholidays-assets/images/about_st_bg.png')%>) no-repeat 70% 7%, linear-gradient(65.77deg, rgba(170, 133, 62, 0.5) 33.44%, rgba(249, 225, 151, 0.5) 67.37%)">
   <div>
     <h1>ABOUT SIGNATURE TOURS</h1>
     <p>
       From charming accommodations to curated cultural encounters, every  aspect is thoughtfully crafted to elevate your travel experience. At The  Signature Tours, we believe in the S-Tour’s philosophy —where every  moment is a signature memory.
     </p>
-    <%=image_tag("iceholidays/frontend/Group_71.png")%>
+    <%=image_tag("/iceholidays-assets/images/Group_71.png")%>
     <div id="about-st-feature">
       <div style="max-width: 449px">
         <p>Every  experience is meticulously designed to create memories that last a  lifetime. Our journeys go beyond the ordinary, offering experiences that  are as unique as you are.</p>
       </div>
       <div id="feature">
-        <%=image_tag("iceholidays/frontend/feature.jpeg")%>
+        <%=image_tag("/iceholidays-assets/images/feature.jpg")%>
         <div id="st-brand">
           <span>Signature Tours</span>
-          <%=image_tag("iceholidays/frontend/logomark.png", id: "st-logo")%>
+          <%=image_tag("/iceholidays-assets/images/logomark.png", id: "st-logo")%>
         </div>
       </div>
     </div>

data/app/views/layouts/iceholidays/frontend/application.html.erb

@@ -7,7 +7,7 @@
 
   <%= yield :head %>
 
-    <%= javascript_include_tag "iceholidays/frontend/application", "data-turbo-track": "reload", type: "module" %>  
+    <%= javascript_include_tag "/iceholidays-assets/application", "data-turbo-track": "reload", type: "module" %>  
     <%= stylesheet_link_tag    "iceholidays/frontend/application", media: "all" %>
 </head>
 <body>

data/app/views/layouts/iceholidays/frontend/shared/_header.html.erb

@@ -7,7 +7,7 @@
       <a>blog</a>
     </div>
     <a href="/" class="nav-menu logo">
-      <%=image_tag("iceholidays/frontend/logo_container.png")%>
+      <%=image_tag("/iceholidays-assets/images/logo_container.png")%>
     </a>
     <div class="nav-menu" id="right-menu">
       <a>contact agents</a>

data/lib/iceholidays/frontend/engine.rb

@@ -3,11 +3,18 @@ module Iceholidays
     class Engine < ::Rails::Engine
       isolate_namespace Iceholidays::Frontend
       initializer "iceholidays_frontend.assets.precompile" do |app|
-        app.config.assets.precompile += %w(iceholidays/frontend/application.js iceholidays/frontend/application.js.map iceholidays/frontend/application.css)
-        app.config.assets.precompile +=  Dir.glob( root.join( 'app', 'assets', 'images', 'iceholidays', 'frontend','**' ) )
+        app.config.assets.precompile += %w(iceholidays/frontend/application.css)
+        # app.config.assets.precompile +=  Dir.glob( root.join( 'app', 'assets', 'images', 'iceholidays', 'frontend','**' ) )
+        # app.config.assets.precompile +=  Dir.glob( root.join( 'public','**/**' ) )      
+        # app.config.assets.precompile +=  Dir.glob( root.join( 'public', 'iceholidays-asset', '**' ) )
+        #app.config.assets.paths += Dir.glob(root.join( 'public', 'iceholidays-assets', '**' ))
       end
-
-
+      
+      config.app_middleware.use(
+        Rack::Static,
+        urls: ["/iceholidays-assets"],
+        root: Iceholidays::Frontend::Engine.root.join("public")
+      )
     end
     
   end

data/lib/iceholidays/frontend/version.rb

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