iceholidays-frontend 0.1.0

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

@@ -0,0 +1,6 @@
+module Iceholidays
+  module Frontend
+    class ApplicationController < ::ApplicationController
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+module Iceholidays
+  module Frontend
+    class SiteController < ApplicationController
+      def index
+      end
+    end
+  end
+end

data/app/helpers/iceholidays/frontend/application_helper.rb

@@ -0,0 +1,9 @@
+module Iceholidays
+  module Frontend
+    module ApplicationHelper
+      def react_component(component_name, props = {}, options = {})
+        Iceholidays::Frontend::ReactComponent.new(component_name).render(props, options)
+      end
+    end
+  end
+end

data/app/javascript/application.js

@@ -0,0 +1,5 @@
+// Entry point for the build script in your package.json
+import "./react"
+//= require jquery3
+//= require popper
+//= require bootstrap

data/app/javascript/react/application.js

@@ -0,0 +1,72 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { intersection, keys, assign, omit } from "lodash-es";
+
+const CLASS_ATTRIBUTE_NAME = "data-react-class";
+const PROPS_ATTRIBUTE_NAME = "data-react-props";
+
+const ReactComponent = {
+  registeredComponents: {},
+  componentRoots: {},
+
+  render(node, component) {
+    const propsJson = node.getAttribute(PROPS_ATTRIBUTE_NAME);
+    const props = propsJson && JSON.parse(propsJson);
+
+    const reactElement = React.createElement(component, props);
+    const root = ReactDOM.createRoot(node);
+
+    root.render(reactElement);
+
+    return root;
+  },
+
+  registerComponents(components) {
+    const collisions = intersection(
+      keys(this.registeredComponents),
+      keys(components)
+    );
+    if (collisions.length > 0) {
+      console.error(
+        `Following components are already registered: ${collisions}`
+      );
+    }
+
+    assign(this.registeredComponents, omit(components, collisions));
+    return true;
+  },
+
+  mountComponents() {
+    const { registeredComponents } = this;
+    const toMount = document.querySelectorAll(`[${CLASS_ATTRIBUTE_NAME}]`);
+
+    for (let i = 0; i < toMount.length; i += 1) {
+      const node = toMount[i];
+      const className = node.getAttribute(CLASS_ATTRIBUTE_NAME);
+      const component = registeredComponents[className];
+
+      if (component) {
+        if (node.innerHTML.length === 0) {
+          const root = this.render(node, component);
+
+          this.componentRoots = { ...this.componentRoots, [className]: root };
+        }
+      } else {
+        console.error(
+          `Can not render a component that has not been registered: ${className}`
+        );
+      }
+    }
+  },
+
+  setup(components = {}) {
+    if (typeof window.ReactComponent === "undefined") {
+      window.ReactComponent = this;
+    }
+
+    window.ReactComponent.registerComponents(components);
+    window.ReactComponent.mountComponents();
+  },
+};
+
+export default ReactComponent;

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

@@ -0,0 +1,182 @@
+import { Tabs, TabsProps } from "antd";
+import React from "react";
+
+const countries = [
+  {
+    name: "Africa",
+    image: "africa.png",
+    image2: "africa2.png",
+    topCities: [{
+      name: "Kenya", 
+      image: "kenya.png",
+      image2: "kenya2.png",
+    },
+    {
+      name: "South Africa", 
+      image: "southafrica.png",
+    },
+    {
+      name: "Tanzania", 
+      image: "tanzania.png",
+    },
+    {
+      name: "Uaganda",
+      image: "uganda.png",
+    }]
+  },
+  {
+    name: "China",
+    image: "china.jpeg",
+    image2: "china2.png",
+    topCities: [{
+      name: "Chong Qing",
+      image: "chongqing.png",
+    },
+    {
+      name: "Guangzhou", 
+      image: "guangzhou.png",
+    },
+    {
+      name: "Guilin", 
+      image: "guilin.png",
+    },
+    {
+      name: "Hongkong", 
+      image: "hongkong.png",
+    }],
+    moreCities: [
+      "Leizhou", "Ningxia", "Qinghai", "Shanghai", "Tibet", "Xiamen", "Yunnan"
+    ],
+    tours: [
+      {
+        name: "Harbin",
+        image: "harbin.png",
+      },
+      {
+        name: "Inner Mongolia",
+        image: "inner_mongolia.png",
+      },
+      {
+        name: "Jiangxi",
+        image: "jiangxi.png",
+      },
+      {
+        name: "Kun Ming",
+        image: "kunming.png",
+      },
+      {
+        name: "Silk Road",
+        image: "slikroad.png",
+      }
+    ]
+  },
+  {
+    name: "Europe"
+  },
+  {
+    name: "Exotic"
+  },
+  {
+    name: "japan"
+  },
+  {
+    name: "korea"
+  },
+  {
+    name: "maldives"
+  },
+  {
+    name: "taiwan"
+  },
+]
+
+function Destinations(){
+  var items:TabsProps["items"] = countries.map((country, index)=>{
+    return {
+      key: index.toString(),
+      label: country.name,
+      children: (
+        <>
+          <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}`)}/>
+              <h1 className="country-name"> {country.name} </h1>
+              <img className="bottom-logo" src={"/dev-assets/iceholidays/frontend/Frame71.png"}></img>
+            </div>
+            {
+              country.topCities?.length && 
+              <div className="top-cities">
+                <h2>Top Cities</h2>
+                <div id="city-group">
+                  {
+                    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}`)}/>
+                        <div className="city-details">
+                          <span className="city-name">{city.name}</span>
+                          <span className="tour-count">1 Tour</span>
+                        </div>
+                      </div>
+                      )
+                    })
+                  }
+                </div>
+              </div>
+            }
+
+            {
+              country.moreCities?.length && 
+              <div className="more-cities">
+                <h2>Browse more {country.name} destination</h2>
+                <div className="other-destinations">  
+                  {
+                    country.moreCities?.map((otherCity, index)=>{
+                      return <a key={index} href="/"> {otherCity} </a>
+                    })
+                  }
+                </div>
+              </div>
+            }
+
+            {
+              country.tours?.length && 
+                <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}")`}}>
+                        <div className="tour-detail"> 
+                          <span className="city-name"> {tour.name}  </span>
+                          <span className="tour-count"> 1 tour </span>
+                        </div>
+                      </div>
+                    })
+                  }
+                </div>
+            }
+          </div>
+        </>
+      )
+    }
+  })
+
+  return (
+    <div id="popular-destinations">
+      <h1>Explore Popular Destination</h1>
+
+      <Tabs 
+        defaultActiveKey="1" 
+        items={items}
+        type="card"/>
+
+    </div>
+  )
+}
+
+export default Destinations;

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

@@ -0,0 +1,16 @@
+import React from "react";
+import HomepageBanner from "./HomepageBanner";
+import Testimonials from "./Testimonials";
+import Destinations from "./Destinations";
+
+
+
+const Homepage = React.FC = () => (
+  <div>
+    <HomepageBanner/>
+    <Destinations/>
+    <Testimonials/>
+  </div>
+);
+
+export default Homepage;

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

@@ -0,0 +1,35 @@
+import { Carousel, Image } from "antd";
+import React from "react";
+import banner1 from "../../../assets/images/iceholidays/frontend/banner1.png"
+import banner2 from "../../../assets/images/iceholidays/frontend/banner2.png"
+const banners = [
+  {file: banner2},
+  {file: banner2},
+]
+
+function HomepageBanner(){
+  return (
+    <div id="cover"> 
+      <div id="search-bar">
+        {/* <%=image_tag("iceholidays/frontend/Rectangle49.png")%> */}
+        <div id="search-bar-widget">
+          sample1
+        </div>
+        {/* <%=image_tag("iceholidays/frontend/Rectangle49.png", class: "flip")%> */}
+      </div>
+      <div>
+        <Carousel autoplay arrows>
+          {
+            banners?.map((image, index)=>{
+              return (
+                <Image key={index} src={`${image.file}`} preview={false}/>
+              )
+            })
+          }
+        </Carousel>
+      </div>
+    </div>
+  )
+}
+
+export default HomepageBanner;

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

@@ -0,0 +1,66 @@
+import { Carousel } from "antd";
+import React from "react";
+
+const contentStyle: React.CSSProperties = {
+  height: '160px',
+  color: '#fff',
+  lineHeight: '160px',
+  textAlign: 'center',
+  background: '#364d79',
+};
+
+const reviews = [
+  {
+    key: 1,
+    itinerarySummary: "8D6N 8D6N PREMIUM KOREA: <br/> 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",
+    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",
+    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")'}}>
+        <span>Testimonial</span>
+      </div>
+
+      <div id="testimonials">
+        <Carousel arrows slidesToScroll= {1} slidesToShow={3}>
+          {
+            reviews?.map((review)=>{
+              return (
+                <div key={review.key} className="testimonial">
+                  <img src="/dev-assets/iceholidays/frontend/5star.png" className="stars-icon"/>
+                  <div className="itinerary-summary">
+                    <span> {review.itinerarySummary} </span>
+                  </div>
+                  <div className="comment">
+                    <span>{review.comment}</span>
+                  </div>
+                  <div className="customer-name">
+                    <span>{review.customerName}</span>
+                  </div>
+                </div>
+              )
+            })
+          }
+        </Carousel>
+      </div>
+    </div>
+  )
+}
+
+export default Testimonials;

data/app/javascript/react/index.js

@@ -0,0 +1,8 @@
+import ReactComponent from "./application"
+import Destinations from "./components/Destinations"
+import HomepageBanner from "./components/HomepageBanner"
+import Homepage from "./components/Homepage"
+import Testimonials from "./components/Testimonials"
+
+
+ReactComponent.setup({Homepage, HomepageBanner, Destinations, Testimonials})

data/app/jobs/iceholidays/frontend/application_job.rb

@@ -0,0 +1,6 @@
+module Iceholidays
+  module Frontend
+    class ApplicationJob < ActiveJob::Base
+    end
+  end
+end

data/app/mailers/iceholidays/frontend/application_mailer.rb

@@ -0,0 +1,8 @@
+module Iceholidays
+  module Frontend
+    class ApplicationMailer < ActionMailer::Base
+      default from: "from@example.com"
+      layout "mailer"
+    end
+  end
+end

data/app/models/iceholidays/frontend/application_record.rb

@@ -0,0 +1,7 @@
+module Iceholidays
+  module Frontend
+    class ApplicationRecord < ActiveRecord::Base
+      self.abstract_class = true
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+<%= 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>
+    <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")%>
+    <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")%>
+        <div id="st-brand">
+          <span>Signature Tours</span>
+          <%=image_tag("iceholidays/frontend/logomark.png", id: "st-logo")%>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Iceholidays frontend</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= yield :head %>
+
+    <%= javascript_include_tag "iceholidays/frontend/application", "data-turbo-track": "reload", type: "module" %>  
+    <%= stylesheet_link_tag    "iceholidays/frontend/application", media: "all" %>
+</head>
+<body>
+
+  <%=render partial:"layouts/iceholidays/frontend/shared/header"%>
+  
+  <main>
+    <%= yield %>
+  </main>
+
+  <%=render partial:"layouts/iceholidays/frontend/shared/footer"%>
+</body>
+
+</html>

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

@@ -0,0 +1,42 @@
+<div id="footer">
+  <div id="footer-links">
+    <div>
+      <div class="link-group-title">Countries</div>
+      <div>
+        <a>africa</a>
+        <a>japan</a>
+        <a>china</a>
+        <a>korea</a>
+        <a>europe</a>
+        <a>maldives</a>
+        <a>exotic</a>
+        <a>taiwan</a>
+      </div>
+    </div>
+    <div>
+      <div class="link-group-title">&nbsp;</div>
+      <div>
+        <a>home</a>
+        <a>pdpa</a>
+        <a>about us</a>
+        <a>privacy policy</a>
+        <a>contact us</a>
+        <a>terms & conditions</a>
+      </div>
+    </div>
+    <div>
+      <div>
+        <div class="link-group-title">Contact Us</div>
+        <div><a>contact agents</a></div>
+      </div>
+
+      <div>
+        <div class="link-group-title">Follow us on</div>
+      </div>
+    </div>
+  </div>
+  <hr>
+  <div id="copyright">
+    <span>Copyright © 2024 Golden Destinations</span>
+  </div>
+</div>

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

@@ -0,0 +1,20 @@
+<div id="header">
+  <div>
+    <div class="nav-menu" id="left-menu">
+      <a>Home</a>
+      <a>about us</a>
+      <a>countries</a>
+      <a>blog</a>
+    </div>
+    <a href="/" class="nav-menu logo">
+      <%=image_tag("iceholidays/frontend/logo_container.png")%>
+    </a>
+    <div class="nav-menu" id="right-menu">
+      <a>contact agents</a>
+      <a>contact us</a>
+    </div>
+  </div>
+  <a id="get-brochure">
+    <span>get brochure</span>
+  </a>
+</div>

data/config/routes.rb

@@ -0,0 +1,3 @@
+Iceholidays::Frontend::Engine.routes.draw do  
+  root to: 'site#index'
+end

data/lib/iceholidays/frontend/engine.rb

@@ -0,0 +1,14 @@
+module Iceholidays
+  module Frontend
+    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','**' ) )
+      end
+
+
+    end
+    
+  end
+end

data/lib/iceholidays/frontend/react_component.rb

@@ -0,0 +1,21 @@
+module Iceholidays
+  module Frontend
+    class ReactComponent
+      include ActionView::Helpers::TagHelper
+      include ActionView::Helpers::TextHelper
+
+      attr_accessor :name
+
+      def initialize(name)
+        @name = name
+      end
+
+      def render(props = {}, options = {})
+        tag = options.delete(:tag) || :div
+        data = { data: { "react-class" => name, "react-props" => props.to_json } }
+
+        content_tag(tag, nil, options.deep_merge(data))
+      end
+    end
+  end
+end

data/lib/iceholidays/frontend/version.rb

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

data/lib/iceholidays/frontend.rb

@@ -0,0 +1,8 @@
+require "iceholidays/frontend/version"
+require "iceholidays/frontend/engine"
+require "iceholidays/frontend/react_component"
+
+module Iceholidays
+  module Frontend
+  end
+end

data/lib/tasks/iceholidays/frontend_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :iceholidays_frontend do
+#   # Task goes here
+# end