iceholidays-frontend 0.1.0 → 0.3.0

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

@@ -1,24 +1,51 @@
-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 SlickButtonFix from "./shared/SlickButtonFix";
+
 const banners = [
-  {file: banner2},
-  {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">
-        {/* <%=image_tag("iceholidays/frontend/Rectangle49.png")%> */}
+        <img src="iceholidays-assets/images/Rectangle49.png"/>
         <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="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,5 +1,11 @@
+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";
+
 
 const contentStyle: React.CSSProperties = {
   height: '160px',
@@ -12,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("/dev-assets/iceholidays/frontend/Layer_1.png")'}}>
+      <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="/dev-assets/iceholidays/frontend/5star.png" 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.1.0"
+    VERSION = "0.3.0"
   end
 end