iceholidays-frontend 0.3.0 → 0.4.0

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { mdiMenuRight } from "@mdi/js";
+import Icon from "@mdi/react";
+
+
+const Postcard = (
+  props: {
+    link: string;
+    image: string;
+    name: string;
+    tourCount: number;
+  }
+) => {
+  const { link, image, name, tourCount } = props;
+
+  const pluralize = (count: number, noun: string, suffix = 's') =>
+    `${count} ${noun}${count > 1 ? suffix : ''}`;
+
+  return (
+    <Link to={link} className="postcard">
+      <img src={image}/>
+      <div className="details">
+        <span className="name">{name}</span>
+        <span className="tour-count">{pluralize(tourCount, "Tour")} <Icon path={mdiMenuRight} size={1} /> </span>
+      </div>
+    </Link>
+  )
+}
+
+export default Postcard;

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

@@ -0,0 +1,21 @@
+import React, { JSX } from "react";
+
+const RibbonSection = (
+  props: {
+    title?: string;
+    children?: JSX.Element;
+  }
+) => {
+  const { title, children } = props;
+  return (
+    <div id="ribbon-section">
+      <div id="ribbon-section_header">
+        { title && <h1> {title} </h1>}
+      </div>
+
+      {children}
+    </div>
+  )
+}
+
+export default RibbonSection;

data/app/javascript/react/index.js

@@ -1,8 +1,6 @@
+
+import App from "./App"
 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})
+ReactComponent.setup({App})

data/app/javascript/react/layouts/MainFooter.tsx

@@ -0,0 +1,72 @@
+import { notification, Space } from "antd";
+import React from "react";
+import { Link } from "react-router-dom";
+import LocationsApi from "../../api-services/locations-api.service";
+import { Country } from "../../interfaces/country.interface";
+
+
+export default class MainFooter extends React.Component {
+  api = new LocationsApi;
+
+  state = {
+    countries: []
+  }
+
+  componentDidMount() {
+    this.api.getCountries()
+      .then(locationsData => {
+        this.setState({countries: locationsData})
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading countries.'});
+      });
+  }
+  
+  render(){
+    return (
+      <div id="main-footer">
+        <div id="main-footer_links">
+          <div>
+            <div className="link-group-title">Countries</div>
+            <div>
+              {
+                this.state.countries.map((country: Country)=> <Link to={`/app/listing?keyword=${country.name}`}>{country.name}</Link> )
+              }
+            </div>
+          </div>
+          <div>
+            <div className="link-group-title">&nbsp;</div>
+            <div>
+              <Link to="/app">home</Link>
+              <Link to="/app">pdpa</Link>
+              <Link to="/app/about-us">about us</Link>
+              <Link to="/app">privacy policy</Link>
+              <Link to="/app/contact-us">contact us</Link>
+              <Link to="/app">terms & conditions</Link>
+            </div>
+          </div>
+          <div>
+            <div>
+              <div className="link-group-title">Contact Us</div>
+              <div><Link to="/app/contact-agents">contact agents</Link></div>
+            </div>
+  
+            <div>
+              <div className="link-group-title">Follow us on</div>
+              <Space size={20}>  
+                <img src="/iceholidays-assets/images/social/ico_fb.png"/>
+                <img src="/iceholidays-assets/images/social/ico_twitter.png"/>
+                <img src="/iceholidays-assets/images/social/ico_yt.png"/>
+                <img src="/iceholidays-assets/images/social/ico_ig.png"/>
+              </Space>
+            </div>
+          </div>
+          <hr/>
+        </div>
+        <div id="copyright">
+          <span>Copyright © 2024 Golden Destinations</span>
+        </div>
+      </div>
+    ) 
+  }
+}

data/app/javascript/react/layouts/MainHeader.tsx

@@ -0,0 +1,45 @@
+import { mdiFileDownload } from "@mdi/js";
+import Icon from "@mdi/react";
+import { Button } from "antd";
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+
+const routes = [
+  {label: "Home", path: "/app"},
+  {label: "About Us", path: "/app/about-us"},
+  {label: "Countries", path: "/app/countries"},
+  {label: "Blog", path: "/app/blog"}
+]
+
+const routes2 = [
+  {label: "Contact Agents", path: "/app/contact-agents"},
+  {label: "Contact Us", path: "/app/contact-us"}
+]
+
+const MainHeader = () => {
+  return (
+    <div id="main-header">
+      <div>
+        <div className="nav-menu" id="left-menu">
+          {
+            routes.map((route, index)=> <NavLink key={index} to={route.path} end className={({ isActive }) => (isActive ? 'active' : '')}> {route.label} </NavLink>)
+          }
+        </div>
+        <span className="nav-menu logo">
+          <img src="/iceholidays-assets/images/logo_container.png"/>
+        </span>
+        <div className="nav-menu" id="right-menu">
+          {
+            routes2.map((route, index)=> <NavLink key={index} to={route.path} end className={({ isActive }) => (isActive ? 'active' : '')}> {route.label} </NavLink>)
+          }
+        </div>
+      </div>
+      <a id="get-brochure">
+        <Button type="primary"><Icon path={mdiFileDownload} size="18px" /> get brochure</Button>
+      </a>
+    </div>
+  )
+}
+
+export default MainHeader;

data/app/javascript/react/layouts/MainLayout.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import { Layout } from 'antd';
+import MainHeader from "./MainHeader";
+import MainFooter from "./MainFooter";
+
+const { Content } = Layout;
+
+const MainLayout = () => {
+  return (
+    <Layout>
+      <MainHeader/> 
+      <Content>
+        <Outlet/>
+      </Content>
+      <MainFooter/>
+    </Layout>
+  )
+};
+
+export default MainLayout;

data/app/javascript/react/pages/AboutUsPage.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import Headline from "../components/shared/Headline";
+import { Col, Flex, Row } from "antd";
+import RibbonSection from "../components/shared/RibbonSection";
+
+const bannerPath = '/iceholidays-assets/images/about_us.png';
+const breadcrumbs = [
+  { title: 'Home' },
+  { title: 'About Us' }
+] 
+
+const AboutUsPage = React.FC = () => (
+  <div id="about-us-page">
+    <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="“WHAT WE DO”"/>
+
+    <div id="about-us-page_body">
+      <div id="introduction">
+        <Flex vertical align="center" justify="center">
+          <img src="/iceholidays-assets/images/logomark.png"/>
+          <h1> Welcome To The Signature Tours </h1>
+        </Flex>
+      </div>
+
+      <div id="article">
+        <Row gutter={40}>
+          <Col span={24}>
+            <img src="/iceholidays-assets/images/about_us2.png"/>
+          </Col>
+          <Col span={12}>
+            <p>The Signature Tours was born from a passion for redefining travel. We believe that journeys should be more than just trips—they should be transformative experiences, filled with moments that leave an indelible mark on the soul. Catering to discerning travelers who seek more than the ordinary, The Signature Tours crafts bespoke journeys that combine sophistication, cultural immersion, and unparalleled quality. </p>
+            <p>Our story begins with a vision: to create journeys that linger in the heart long after the traveler returns home. Each itinerary we design reflects our dedication to perfection. From the charm of boutique accommodations nestled in picturesque landscapes to handpicked cultural experiences that unveil the soul of a destination, every detail is thoughtfully considered to ensure your journey is as seamless as it is extraordinary.</p>
+            <p>At The Signature Tours, we embrace the philosophy of the S-Tours experience—where every moment is a masterpiece. Imagine strolling through the cobblestone streets of a quaint village, savoring the aroma of freshly baked bread as locals welcome you with warm smiles. </p>
+          </Col>
+          <Col span={12}>
+            <p>Picture yourself standing atop a majestic mountain at sunrise,the golden hues of the horizon reflecting the sense of awe within you. These are the kinds of moments we strive to create—authentic, meaningful, and unforgettable.</p>
+            <p>But our commitment goes beyond premium and comfort. It’s about forging connections—with places, cultures, and people. It’s about stepping into a story, whether it’s exploring ancient ruins with a seasoned archaeologist, learning the art of wine making from a passionate vintner, or sharing laughter with a local family over a home-cooked meal.</p>
+            <p>At The Signature Tours, every journey is an invitation to step out of the ordinary and into a world of wonder. We’re not just about travel; we’re about creating memories that stay with you forever. This is our promise, and this is what we call the S-Tours philosophy where we deliver S-Class Journeys, Signature Memories. Because every journey should be as unique as your signature.</p>
+          </Col>
+        </Row>
+      </div>
+
+
+    </div>
+    <RibbonSection>
+      <>
+      <Row id="quality-policy" gutter={40} justify="center">
+        <Col span={24}>
+          <div className="section-header">
+            <h2>Quality Policy</h2>
+            <p>ICE Holidays is committed to striving towards our customer satisfaction in areas of more quality value for money of our products & services. The management and all employees are committed to the company quality policy through effort in:</p>
+          </div>
+        </Col>
+        <Col span={8}>
+            <div className="items">
+              <img src="/iceholidays-assets/images/innovative.png"/>
+              <label>Innovative</label>
+              <p>Talent team develops great products and services; Agile, innovative, and a quality conscious team of resourceful people dedicated to the best.</p>
+            </div>
+        </Col>
+        <Col span={8}>
+            <div className="items">
+              <img src="/iceholidays-assets/images/competitiveness.png"/>
+              <label>Competitiveness</label>
+              <p>Provide competitive pricing to achieve customer satisfaction.</p>
+            </div>
+        </Col>
+        <Col span={8}>
+            <div className="items">
+              <img src="/iceholidays-assets/images/ethical.png"/>
+              <label>Ethical</label>
+              <p>Precedent for an honest, fair and ethical business.</p>
+            </div>
+        </Col>
+      </Row>
+
+      <Row id="certificates" gutter={24}>
+        <Col span={24}>
+          <div className="section-header">
+            <h2>Our Certificates</h2>
+            <p>We have acquired recognition and certificates such as:</p>
+          </div>
+        </Col>
+        <Col span={8}>
+            <img src="/iceholidays-assets/images/certificate1.png"/>
+        </Col>
+        <Col span={8}>
+            <img src="/iceholidays-assets/images/certificate2.png"/>
+        </Col>
+      </Row>
+      </>
+    </RibbonSection>
+  </div>
+);
+
+export default AboutUsPage;

data/app/javascript/react/pages/BlogPage.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import Headline from "../components/shared/Headline";
+import { Button, Card, Col, Row, Space } from "antd";
+import FilterPills from "../widgets/FilterPills";
+import { Link } from "react-router-dom";
+const { Meta } = Card;
+
+const bannerPath = '/iceholidays-assets/images/blog.png';
+const breadcrumbs = [
+  { title: 'Home' },
+  { title: 'Blog' }
+] 
+
+const types = [ "News", "Blogs" ];
+const blogs = [
+  {
+    id: 1,
+    cover: "/iceholidays-assets/images/blog1.png",
+    title: "旅游的意义：探索世界与内心的旅程",
+    info: "未分类 / 发表评论 / 2024年11月22日",
+    summary: "旅游不仅拓展视野，也带来人生的启示。它教会我们谦逊、适应变化、享受过程，激发内心力量，感恩遇见，并帮助我们找回初心。"
+  },
+  {
+    id: 2,
+    cover: "/iceholidays-assets/images/blog1.png",
+    title: "旅游的意义：探索世界与内心的旅程",
+    info: "未分类 / 发表评论 / 2024年11月22日",
+    summary: "旅游不仅拓展视野，也带来人生的启示。它教会我们谦逊、适应变化、享受过程，激发内心力量，感恩遇见，并帮助我们找回初心。"
+  },
+  {
+    id: 3,
+    cover: "/iceholidays-assets/images/blog1.png",
+    title: "旅游的意义：探索世界与内心的旅程",
+    info: "未分类 / 发表评论 / 2024年11月22日",
+    summary: "旅游不仅拓展视野，也带来人生的启示。它教会我们谦逊、适应变化、享受过程，激发内心力量，感恩遇见，并帮助我们找回初心。"
+  },
+]
+
+
+const BlogPage = React.FC = () => (
+  <div id="blog-page">
+    <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="Blog"/>
+
+    <div id="blog-page_body">
+      <Space size={12} direction="vertical">
+        <FilterPills items={types} allOption={true}></FilterPills>
+        <FilterPills items="years" title="Year" allOption={true}></FilterPills>
+        <FilterPills items="months" title="Month" allOption={true}></FilterPills>
+      </Space>
+
+      <div id="blogs">
+        <Row wrap gutter={20}>
+          {
+            blogs.map(blog => (
+              <Col span={8}>
+                <Link to={`/app/blog/${blog.id}`}>
+                  <Card
+                    hoverable
+                    cover={<img alt="example" src={blog.cover} />}
+                  >
+                    <Meta title={blog.title} description={
+                      <>
+                        <span>{blog.info}</span>
+                        <p>{blog.summary}</p>
+                        <Button color="primary" variant="outlined" block>阅读更多</Button>
+                      </>
+                    } />
+                  </Card>
+                </Link>
+              </Col>
+            ))
+          }
+        </Row>
+      </div>
+    </div>
+  </div>
+);
+
+export default BlogPage;

data/app/javascript/react/pages/BlogShowPage.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import Headline from "../components/shared/Headline";
+
+const bannerPath = '/iceholidays-assets/images/blog.png';
+const breadcrumbs = [
+  { title: 'Home' },
+  { title: 'Blog' },
+  { title: '从斯里兰卡到马尔代夫' },
+] 
+
+const types = [ "News", "Blogs" ];
+const blogs = [
+  {
+    cover: "/iceholidays-assets/images/blog1.png",
+    title: "旅游的意义：探索世界与内心的旅程",
+    info: "未分类 / 发表评论 / 2024年11月22日",
+    summary: "旅游不仅拓展视野，也带来人生的启示。它教会我们谦逊、适应变化、享受过程，激发内心力量，感恩遇见，并帮助我们找回初心。"
+  },
+  {
+    cover: "/iceholidays-assets/images/blog1.png",
+    title: "旅游的意义：探索世界与内心的旅程",
+    info: "未分类 / 发表评论 / 2024年11月22日",
+    summary: "旅游不仅拓展视野，也带来人生的启示。它教会我们谦逊、适应变化、享受过程，激发内心力量，感恩遇见，并帮助我们找回初心。"
+  },
+  {
+    cover: "/iceholidays-assets/images/blog1.png",
+    title: "旅游的意义：探索世界与内心的旅程",
+    info: "未分类 / 发表评论 / 2024年11月22日",
+    summary: "旅游不仅拓展视野，也带来人生的启示。它教会我们谦逊、适应变化、享受过程，激发内心力量，感恩遇见，并帮助我们找回初心。"
+  },
+]
+
+const BlogShowPage = React.FC = () => (
+  <div id="blog-show-page">
+    <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="Blog"/>
+
+    <div id="blog-page_body">
+      
+    </div>
+  </div>
+);
+
+export default BlogShowPage;

data/app/javascript/react/pages/ContactAgentsPage.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import Headline from "../components/shared/Headline";
+
+const bannerPath = '/iceholidays-assets/images/contact_agents.png';
+const breadcrumbs = [
+  { title: 'Home' },
+  { title: 'Contact Agents' }
+] 
+
+const ContactAgentsPage = React.FC = () => (
+  <div id="contact-agents-page">
+    <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="CONTACT AGENTS"/>
+  </div>
+);
+
+export default ContactAgentsPage;

data/app/javascript/react/pages/ContactUsPage.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import Headline from "../components/shared/Headline";
+import { Button, Col, Flex, Form, Input, Row, Select, Space } from "antd";
+import { mdiFacebook, mdiInstagram, mdiTwitter, mdiYoutube } from "@mdi/js";
+import Icon from "@mdi/react";
+const { TextArea } = Input;
+
+const bannerPath = '/iceholidays-assets/images/contact_us.png';
+const breadcrumbs = [
+  { title: 'Home' },
+  { title: 'Contact Us' }
+] 
+
+const ContactUsPage = React.FC = () => {
+  const [form] = Form.useForm();
+  
+  return (
+    <div id="contact-us-page">
+      <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="contact us"/>
+
+      <div id="contact-us-page_body">
+        <img src="/iceholidays-assets/images/contact_us_form.png"/>
+
+        <div id="contact-us-form">
+          <div id="contact-us-form_header">
+            <h2>Get in touch</h2>
+            <span>Send us your enquiry</span>
+          </div>
+          <Form
+            form={form}
+            autoComplete="off"
+            layout="vertical"
+            variant="filled"
+          >
+            <Form.Item label="Enter Name" name="name">
+              <Input placeholder="Enter Here" />
+            </Form.Item>
+
+            <Row gutter={20}>
+              <Col span={12}>
+                <Form.Item label="Enter Email" name="email">
+                  <Input placeholder="Enter Here" />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item label="Enter Phone Number" name="phoneNumber">
+                  <Input placeholder="Enter Here" />
+                </Form.Item>
+              </Col>
+            </Row>
+
+            <Form.Item label="Select State" name="state">
+              <Select
+                  placeholder="Please Select"
+                  defaultValue="lucy"
+                  options={[
+                    { value: 'jack', label: 'Jack' },
+                  ]}
+                />
+            </Form.Item>
+
+            <Form.Item label="Select Area" name="area">
+              <Select
+                  placeholder="Please Select"
+                  defaultValue="lucy"
+                  options={[
+                    { value: 'jack', label: 'Jack' },
+                  ]}
+                />
+            </Form.Item>
+
+            <Form.Item label="Select Subject" name="subject">
+              <Select
+                  placeholder="Please Select"
+                  defaultValue="lucy"
+                  options={[
+                    { value: 'jack', label: 'Jack' },
+                  ]}
+                />
+            </Form.Item>
+
+            <Form.Item label="Write your message" name="message">
+              <TextArea rows={4} placeholder="Write Here"/>
+            </Form.Item>
+
+            <Form.Item wrapperCol={{ offset: 10, span: 14 }}>
+              <Button type="primary" htmlType="submit">
+                Submit
+              </Button>
+            </Form.Item>
+
+          </Form>
+        </div>
+      </div>
+
+      <div id="contact-us-page_footer">
+        <Row gutter={29}>
+          <Col span={12}>
+            <div>
+              <label>Contact Us</label>
+              <span>feedback@gd.my</span>
+            </div>
+          </Col>
+          <Col span={12}>
+            <div>
+              <label>Connect with Us</label>
+              <Space size={29}>
+                <Icon path={mdiFacebook} size={1} />
+                <Icon path={mdiInstagram} size={1} />
+                <Icon path={mdiTwitter} size={1} />
+                <Icon path={mdiYoutube} size={1} />
+                <img src="/iceholidays-assets/images/social.png" className="social-icon"/>
+              </Space>
+            </div>
+          </Col>
+        </Row>
+      </div>
+  </div>
+  );
+};
+
+export default ContactUsPage;

data/app/javascript/react/pages/CountriesPage.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import Headline from "../components/shared/Headline";
+import LocationsApi from "../../api-services/locations-api.service";
+import { Col, Flex, notification, Row } from "antd";
+import { Country } from "../../interfaces/country.interface";
+import Postcard from "../components/shared/Postcard";
+
+const bannerPath = '/iceholidays-assets/images/about_us.png';
+const breadcrumbs = [
+  { title: 'Home' },
+  { title: 'Countries' }
+] 
+
+
+export default class CountriesPage extends React.Component {
+  locationsApi = new LocationsApi;
+
+  state = {
+    countries: []
+  }
+
+  componentDidMount() {
+    this.locationsApi.getCountries()
+      .then(locationsData => {
+        this.setState({countries: locationsData})
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading countries.'});
+      });
+  }
+
+
+  render(){
+    return (
+      <div id="countries-page">
+        <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="Countries"/>
+
+        <div id="countries-page_body">
+          <div id="introduction">
+            <Flex vertical gap={24}>
+              <div id="introduction_header"> <img src="/iceholidays-assets/images/logomark.png"/> <span> The Signature Tours </span> </div>
+              <div id="introduction_body">
+                <p>Immerse yourself in the art of travel with The Signature Tour. 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>
+                
+                <p>From charming accommodations to curated cultural encounters, every aspect is thoughtfully crafted to elevate your travel experience. At The Signature Tour, we believe in the S-Tour’s philosophy —where every moment is a signature memory.</p>
+              </div>
+            </Flex>
+          </div>
+
+          <h2> Countries </h2>
+          <div className="postcards">
+            {
+              this.state.countries.map((country:Country, index) => <Postcard key={index} link={`/app/listing?keyword=${country.name}`} image={country.cover} name={country.name} tourCount={country.tourCount}/>)
+            }
+          </div>
+        </div>
+
+      </div>
+    )
+  }
+}