first
This commit is contained in:
57
src/pages/apps/travel-agency/flight/Booking.tsx
Normal file
57
src/pages/apps/travel-agency/flight/Booking.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import PageBreadcrumb from 'components/common/PageBreadcrumb';
|
||||
import { defaultBreadcrumbItems } from 'data/commonData';
|
||||
import { Container, Row, Col } from 'react-bootstrap';
|
||||
import FlightBookingWizard from '../payment/FlightBookingWizard';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faClock } from '@fortawesome/free-solid-svg-icons';
|
||||
import FlightInfo from 'components/modules/travel-agency/flight/booking/FlightInfo';
|
||||
import FlightDetails from 'components/modules/travel-agency/flight/booking/FlightDetails';
|
||||
import CouponCard from 'components/cards/CuponCard';
|
||||
import PaymentSummary from 'components/modules/travel-agency/flight/booking/PaymentSummary';
|
||||
import TravelerDetails from 'components/modules/travel-agency/flight/booking/TravelerDetails';
|
||||
import ResizableNavbar from 'components/navbars/travel-agency/ResizableNavbar';
|
||||
import { flightNavItems } from 'data/travel-agency/resizableNav';
|
||||
import FlightBottomBar from './BottomBar';
|
||||
|
||||
const FlightBooking = () => {
|
||||
return (
|
||||
<>
|
||||
<ResizableNavbar navItems={flightNavItems} />
|
||||
<Container fluid="small" className="pt-6 pb-6 pb-9">
|
||||
<PageBreadcrumb items={defaultBreadcrumbItems} className="mb-3" />
|
||||
<h2 className="mb-5">Booking</h2>
|
||||
<Row className="g-3 align-items-sm-center justify-content-between mb-5">
|
||||
<Col sm>
|
||||
<FlightBookingWizard activeItem="Booking" />
|
||||
</Col>
|
||||
<Col sm className="text-sm-end">
|
||||
<div>
|
||||
<p className="mb-2 text-info">Book before time runs out</p>
|
||||
<h3 className="mb-0 text-info fw-bold d-flex gap-2 align-items-center justify-content-sm-end">
|
||||
<FontAwesomeIcon icon={faClock} className="fs-8" />
|
||||
<span>29</span>
|
||||
<span className="fs-9 fw-normal">min</span>
|
||||
<span>50</span>
|
||||
<span className="fs-9 fw-normal">sec</span>
|
||||
</h3>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<FlightInfo />
|
||||
<FlightDetails />
|
||||
<Row className="justify-content-between">
|
||||
<Col lg={8}>
|
||||
<TravelerDetails />
|
||||
<PaymentSummary />
|
||||
</Col>
|
||||
<Col lg={4}>
|
||||
<CouponCard />
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
<FlightBottomBar />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FlightBooking;
|
||||
31
src/pages/apps/travel-agency/flight/BottomBar.tsx
Normal file
31
src/pages/apps/travel-agency/flight/BottomBar.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { Button, Container } from 'react-bootstrap';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
const FlightBottomBar = () => {
|
||||
return (
|
||||
<div className="flight-bottom-bar bg-secondary" data-bs-theme="light">
|
||||
<Container fluid="small" className="py-3">
|
||||
<div className="d-flex gap-4 gap-sm-6 align-items-center justify-content-end">
|
||||
<h6 className="text-white mb-0">
|
||||
<span className="me-2">Total</span>
|
||||
<span className="me-2">:</span>
|
||||
<span>BDT</span>
|
||||
<span className="fs-5 ms-2">4,609</span>
|
||||
</h6>
|
||||
<Button
|
||||
variant="primary"
|
||||
className="flex-1 text-nowrap"
|
||||
href="#!"
|
||||
style={{ maxWidth: '17rem' }}
|
||||
>
|
||||
Continue
|
||||
<FontAwesomeIcon icon={faChevronRight} className="fs-9 ms-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FlightBottomBar;
|
||||
52
src/pages/apps/travel-agency/flight/Homepage.tsx
Normal file
52
src/pages/apps/travel-agency/flight/Homepage.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import NavbarHome from 'components/navbars/travel-agency/NavbarHome';
|
||||
import { Container } from 'react-bootstrap';
|
||||
import bgIllustrations from 'assets/img/bg/44.png';
|
||||
import FlightSearch from 'components/modules/travel-agency/flight/homepage/FlightSearch';
|
||||
import FlightListing from 'components/modules/travel-agency/flight/homepage/FlightListing';
|
||||
import FlightFooter from 'components/modules/travel-agency/flight/homepage/FlightFooter';
|
||||
import FlightPromoModal from 'components/modals/FlightPromoModal';
|
||||
import { useState } from 'react';
|
||||
import ResizableNavbar from 'components/navbars/travel-agency/ResizableNavbar';
|
||||
import { flightNavItems } from 'data/travel-agency/resizableNav';
|
||||
|
||||
const FlightHomepage = () => {
|
||||
const [showPromoModal, setShowPromoModal] = useState(true);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ResizableNavbar navItems={flightNavItems} />
|
||||
<section className="container-small py-0">
|
||||
<NavbarHome currentPage="Flight" />
|
||||
</section>
|
||||
<section className="p-0">
|
||||
<Container fluid className="px-0">
|
||||
<div className="position-relative" style={{ height: '19rem' }}>
|
||||
<div
|
||||
className="bg-holder"
|
||||
style={{
|
||||
backgroundImage: `url(${bgIllustrations})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Container>
|
||||
<Container
|
||||
fluid="small"
|
||||
className="mb-6"
|
||||
style={{ marginTop: '-12rem' }}
|
||||
>
|
||||
<FlightSearch />
|
||||
<FlightListing />
|
||||
</Container>
|
||||
<FlightFooter />
|
||||
</section>
|
||||
<FlightPromoModal
|
||||
show={showPromoModal}
|
||||
handleClose={() => setShowPromoModal(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FlightHomepage;
|
||||
47
src/pages/apps/travel-agency/flight/Payment.tsx
Normal file
47
src/pages/apps/travel-agency/flight/Payment.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import PageBreadcrumb from 'components/common/PageBreadcrumb';
|
||||
import { defaultBreadcrumbItems } from 'data/commonData';
|
||||
import { Card, Col, Container, Row } from 'react-bootstrap';
|
||||
import FlightBookingWizard from '../payment/FlightBookingWizard';
|
||||
import CountdownDisplay from '../payment/CountdownDisplay';
|
||||
import FlightPaymentInfo from './PaymentInfo';
|
||||
import PaymentMethodForm from 'components/forms/PaymentMethodForm';
|
||||
import FlightBottomBar from './BottomBar';
|
||||
import ResizableNavbar from 'components/navbars/travel-agency/ResizableNavbar';
|
||||
import { flightNavItems } from 'data/travel-agency/resizableNav';
|
||||
|
||||
const FlightPayment = () => {
|
||||
return (
|
||||
<>
|
||||
<ResizableNavbar navItems={flightNavItems} />
|
||||
<Container fluid="small" className="pt-6 pb-9">
|
||||
<PageBreadcrumb items={defaultBreadcrumbItems} className="mb-3" />
|
||||
<h2 className="mb-5">Payment</h2>
|
||||
<Row className="g-3 align-items-sm-center justify-content-between mb-5">
|
||||
<Col sm>
|
||||
<FlightBookingWizard activeItem="Payment" />
|
||||
</Col>
|
||||
<Col sm className="text-sm-end">
|
||||
<CountdownDisplay />
|
||||
</Col>
|
||||
</Row>
|
||||
<hr className="mt-5 mb-6" />
|
||||
<Row className="g-0 gap-6">
|
||||
<Col lg>
|
||||
<FlightPaymentInfo />
|
||||
</Col>
|
||||
<Col lg>
|
||||
<Card>
|
||||
<Card.Body>
|
||||
<PaymentMethodForm marginTop="short" />
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<hr className="mt-6 mb-9 d-none d-lg-block" />
|
||||
</Container>
|
||||
<FlightBottomBar />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FlightPayment;
|
||||
191
src/pages/apps/travel-agency/flight/PaymentInfo.tsx
Normal file
191
src/pages/apps/travel-agency/flight/PaymentInfo.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import { Button, Row, Col } from 'react-bootstrap';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faPlane,
|
||||
faEdit,
|
||||
faUser,
|
||||
faSuitcaseRolling,
|
||||
faCircle
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import qatarAirlineLogo from 'assets/img/brand/qatar-airline.png';
|
||||
|
||||
const FlightInfo = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="d-flex justify-content-between mb-4">
|
||||
<div>
|
||||
<FontAwesomeIcon icon={faPlane} className="text-primary me-2" />
|
||||
<h4 className="mb-0 d-inline-block text-body-highlight">
|
||||
Flight info
|
||||
</h4>
|
||||
</div>
|
||||
<Button variant="link" className="p-0">
|
||||
<FontAwesomeIcon icon={faEdit} className="me-2" />
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 d-flex align-items-center">
|
||||
<img
|
||||
src={qatarAirlineLogo}
|
||||
alt=""
|
||||
style={{ height: '3.5rem' }}
|
||||
className="img-fluid rounded-3"
|
||||
/>
|
||||
<h5 className="text-nowrap fw-normal d-inline-block ms-2 mb-0">
|
||||
Qatar Airways
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<p className="text-body-emphasis">
|
||||
Travelling from <strong>Dhaka</strong> to <strong>Cox’s Bazar</strong>
|
||||
</p>
|
||||
|
||||
<div className="d-flex gap-2 flex-wrap">
|
||||
<p className="mb-0 text-body-emphasis text-nowrap">
|
||||
Tuesday, 29 January
|
||||
<FontAwesomeIcon
|
||||
icon={faCircle}
|
||||
className="text-body-tertiary fs-11 mx-2"
|
||||
transform="shrink-6"
|
||||
/>
|
||||
5:00 pm
|
||||
</p>
|
||||
<p className="mb-0 text-body-emphasis text-nowrap">
|
||||
<span className="text-body-tertiary me-2">-</span>
|
||||
Tuesday, 29 January
|
||||
<FontAwesomeIcon
|
||||
icon={faCircle}
|
||||
className="text-body-tertiary fs-11 mx-2"
|
||||
transform="shrink-6"
|
||||
/>
|
||||
5:30 pm
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const PersonalInfo = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="d-flex justify-content-between mb-4">
|
||||
<div>
|
||||
<FontAwesomeIcon icon={faUser} className="text-primary me-2" />
|
||||
<h4 className="mb-0 d-inline-block text-body-highlight">
|
||||
Personal info
|
||||
</h4>
|
||||
</div>
|
||||
<Button variant="link" className="p-0">
|
||||
<FontAwesomeIcon icon={faEdit} className="me-2" />
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="bg-body-highlight rounded-2 p-4">
|
||||
<Row className="g-0 gy-5 flex-column flex-sm-row">
|
||||
<Col className="pe-4">
|
||||
<h5 className="mb-3">Passenger 1</h5>
|
||||
<p className="mb-2">John James Johansen</p>
|
||||
<p className="mb-0">
|
||||
Adult
|
||||
<FontAwesomeIcon
|
||||
icon={faCircle}
|
||||
className="text-body-tertiary fs-11 mx-2"
|
||||
transform="shrink-5"
|
||||
/>
|
||||
Male
|
||||
</p>
|
||||
</Col>
|
||||
<Col className="border-start-sm border-top-sm-0 border-top border-translucent ps-sm-4 pt-4 pt-sm-0">
|
||||
<h5 className="mb-3">Passenger 2</h5>
|
||||
<p className="mb-2">John James Johansen</p>
|
||||
<p className="mb-0">
|
||||
Adult
|
||||
<FontAwesomeIcon
|
||||
icon={faCircle}
|
||||
className="text-body-tertiary fs-11 mx-2"
|
||||
transform="shrink-5"
|
||||
/>
|
||||
Male
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const BaggageInfo = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="d-flex justify-content-between mb-4">
|
||||
<div>
|
||||
<FontAwesomeIcon
|
||||
icon={faSuitcaseRolling}
|
||||
className="text-primary me-2"
|
||||
/>
|
||||
<h4 className="mb-0 d-inline-block text-body-highlight">
|
||||
Included baggage
|
||||
</h4>
|
||||
</div>
|
||||
<Button variant="link" className="p-0">
|
||||
<FontAwesomeIcon icon={faEdit} className="me-2" />
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="d-flex gap-3 mb-4">
|
||||
<FontAwesomeIcon
|
||||
icon={faCircle}
|
||||
className="text-body-quaternary fs-11 mx-2"
|
||||
transform="down-8"
|
||||
/>
|
||||
<div>
|
||||
<h5 className="mb-2">1 personal item</h5>
|
||||
<p className="mb-0 text-body-tertiary">
|
||||
Must go under the seat in front of you
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex gap-3 mb-4">
|
||||
<FontAwesomeIcon
|
||||
icon={faCircle}
|
||||
className="text-body-quaternary fs-11 mx-2"
|
||||
transform="down-8"
|
||||
/>
|
||||
<div>
|
||||
<h5 className="mb-2">1 carry-on bag</h5>
|
||||
<p className="mb-0 text-body-tertiary">Max weight 8 kg</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex gap-3">
|
||||
<FontAwesomeIcon
|
||||
icon={faCircle}
|
||||
className="text-body-quaternary fs-11 mx-2"
|
||||
transform="down-8"
|
||||
/>
|
||||
<div>
|
||||
<h5 className="mb-2">1 checked bag</h5>
|
||||
<p className="mb-0 text-body-tertiary">Max weight 25 kg</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FlightPaymentInfo = () => {
|
||||
return (
|
||||
<div>
|
||||
<FlightInfo />
|
||||
<hr className="my-5" />
|
||||
<PersonalInfo />
|
||||
<hr className="my-5" />
|
||||
<BaggageInfo />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FlightPaymentInfo;
|
||||
124
src/pages/apps/travel-agency/hotel/admin/AddProperty.tsx
Normal file
124
src/pages/apps/travel-agency/hotel/admin/AddProperty.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import WizardForm from 'components/wizard/WizardForm';
|
||||
import useWizardForm from 'hooks/useWizardForm';
|
||||
import WizardFormProvider from 'providers/WizardFormProvider';
|
||||
import { Col, Row, Tab } from 'react-bootstrap';
|
||||
import WizardFormFooter from 'components/wizard/WizardFormFooter';
|
||||
import classNames from 'classnames';
|
||||
import PageBreadcrumb from 'components/common/PageBreadcrumb';
|
||||
import { defaultBreadcrumbItems } from 'data/commonData';
|
||||
// import BasicInformationForm from 'components/modules/travel-agency/dashboard/hotel/add-proterty/BasicInformationForm';
|
||||
import LocationForm from 'components/modules/travel-agency/hotel/add-proterty/LocationForm';
|
||||
import GeneralAmenitiesForm from 'components/modules/travel-agency/hotel/add-proterty/GeneralAmenitiesForm';
|
||||
import AddPhotos from 'components/modules/travel-agency/hotel/add-proterty/AddPhotos';
|
||||
import FinanceForm from 'components/modules/travel-agency/hotel/add-proterty/FinanceForm';
|
||||
import Preview from 'components/modules/travel-agency/hotel/add-proterty/Preview';
|
||||
import { addPropertyWizardNav } from 'data/wizard/wizard';
|
||||
import WizardSideNav from 'components/wizard/WizardSideNav';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { urlToFile } from 'helpers/utils';
|
||||
import {
|
||||
addPropertyDefaultFormData,
|
||||
pictures
|
||||
} from 'data/travel-agency/addProperty';
|
||||
import PoliciesForm from 'components/modules/travel-agency/hotel/add-proterty/PoliciesForm';
|
||||
import BasicInformationForm from 'components/modules/travel-agency/hotel/add-proterty/BasicInformationForm';
|
||||
|
||||
const AddProperty = () => {
|
||||
const [images, setImages] = useState<File[]>([]);
|
||||
const [tabEventKey, setTabEventKey] = useState(1);
|
||||
const form = useWizardForm({
|
||||
totalStep: 7
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const loadImages = async () => {
|
||||
const imageFiles = await Promise.all(
|
||||
pictures.map(async picUrl => {
|
||||
return await urlToFile(picUrl);
|
||||
})
|
||||
);
|
||||
setImages(imageFiles);
|
||||
};
|
||||
|
||||
loadImages();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
form.setFormData({ ...addPropertyDefaultFormData, photos: images });
|
||||
}, [images]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mb-9">
|
||||
<PageBreadcrumb items={defaultBreadcrumbItems} />
|
||||
<h2 className="fs-5 mb-4 mb-xl-5">Add New Property </h2>
|
||||
<WizardFormProvider {...form}>
|
||||
<Row className="gx-0 gx-xl-5 theme-wizard">
|
||||
<Col xl={{ order: 1, span: 4 }}>
|
||||
<div className="scrollbar mb-4">
|
||||
<WizardSideNav
|
||||
navItems={addPropertyWizardNav}
|
||||
setTabEventKey={setTabEventKey}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xl={8} className="flex-1">
|
||||
<Row>
|
||||
<Col xxl={8}>
|
||||
<Tab.Content>
|
||||
<Tab.Pane eventKey={1}>
|
||||
<WizardForm step={1}>
|
||||
<BasicInformationForm />
|
||||
</WizardForm>
|
||||
</Tab.Pane>
|
||||
<Tab.Pane eventKey={2}>
|
||||
<WizardForm step={2}>
|
||||
<LocationForm tabEventKey={tabEventKey} />
|
||||
</WizardForm>
|
||||
</Tab.Pane>
|
||||
<Tab.Pane eventKey={3}>
|
||||
<WizardForm step={3}>
|
||||
<GeneralAmenitiesForm />
|
||||
</WizardForm>
|
||||
</Tab.Pane>
|
||||
<Tab.Pane eventKey={4}>
|
||||
<WizardForm step={4}>
|
||||
<AddPhotos
|
||||
title="Add property picture"
|
||||
images={images}
|
||||
/>
|
||||
</WizardForm>
|
||||
</Tab.Pane>
|
||||
<Tab.Pane eventKey={5}>
|
||||
<WizardForm step={5}>
|
||||
<FinanceForm />
|
||||
</WizardForm>
|
||||
</Tab.Pane>
|
||||
<Tab.Pane eventKey={6}>
|
||||
<WizardForm step={6}>
|
||||
<PoliciesForm />
|
||||
</WizardForm>
|
||||
</Tab.Pane>
|
||||
<Tab.Pane eventKey={7}>
|
||||
<WizardForm step={7}>
|
||||
<Preview />
|
||||
</WizardForm>
|
||||
</Tab.Pane>
|
||||
</Tab.Content>
|
||||
<div className="mt-6">
|
||||
<WizardFormFooter
|
||||
hidePrevBtn
|
||||
className={classNames({ 'd-none': !form.getCanNextPage })}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</WizardFormProvider>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddProperty;
|
||||
93
src/pages/apps/travel-agency/hotel/admin/AddRoom.tsx
Normal file
93
src/pages/apps/travel-agency/hotel/admin/AddRoom.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import PageBreadcrumb from 'components/common/PageBreadcrumb';
|
||||
import { defaultBreadcrumbItems } from 'data/commonData';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Row, Col, Tab } from 'react-bootstrap';
|
||||
import useWizardForm from 'hooks/useWizardForm';
|
||||
import WizardForm from 'components/wizard/WizardForm';
|
||||
import WizardFormProvider from 'providers/WizardFormProvider';
|
||||
import RoomDetailsForm from 'components/modules/travel-agency/hotel/add-room/RoomDetailsForm';
|
||||
import { addRoomWizardNav } from 'data/wizard/wizard';
|
||||
import RoomWizardFooter from 'components/modules/travel-agency/hotel/add-room/RoomWizardFooter';
|
||||
import Pricing from 'components/modules/travel-agency/hotel/add-room/Pricing';
|
||||
import Amenities from 'components/modules/travel-agency/hotel/add-room/Amenities';
|
||||
import AddPhotos from 'components/modules/travel-agency/hotel/add-proterty/AddPhotos';
|
||||
import Preview from 'components/modules/travel-agency/hotel/add-room/Preview';
|
||||
import WizardSideNav from 'components/wizard/WizardSideNav';
|
||||
import { urlToFile } from 'helpers/utils';
|
||||
import { pictures } from 'data/travel-agency/addProperty';
|
||||
import { addRoomDefaultFormData } from 'data/travel-agency/addRoom';
|
||||
|
||||
const AddRoom = () => {
|
||||
const [images, setImages] = useState<File[]>([]);
|
||||
|
||||
const form = useWizardForm({
|
||||
totalStep: 5
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const loadImages = async () => {
|
||||
const imageFiles = await Promise.all(
|
||||
pictures.map(async picUrl => {
|
||||
return await urlToFile(picUrl);
|
||||
})
|
||||
);
|
||||
setImages(imageFiles);
|
||||
};
|
||||
|
||||
loadImages();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
form.setFormData({ ...addRoomDefaultFormData, pictures: images });
|
||||
}, [images]);
|
||||
|
||||
return (
|
||||
<div className="mb-9">
|
||||
<PageBreadcrumb className="mb-3" items={defaultBreadcrumbItems} />
|
||||
<h2 className="fs-5 mb-4 mb-xl-5">Add New Room</h2>
|
||||
<WizardFormProvider {...form}>
|
||||
<Row className="gx-0 gx-xl-5 theme-wizard">
|
||||
<Col xl={{ order: 1, span: 4 }}>
|
||||
<WizardSideNav navItems={addRoomWizardNav} />
|
||||
</Col>
|
||||
<Col xl={8} className="flex-1">
|
||||
<Row className="mt-4 mt-xl-0">
|
||||
<Col xxl={8}>
|
||||
<Tab.Content>
|
||||
<Tab.Pane eventKey={1}>
|
||||
<WizardForm step={1}>
|
||||
<RoomDetailsForm />
|
||||
</WizardForm>
|
||||
</Tab.Pane>
|
||||
<Tab.Pane eventKey={2}>
|
||||
<WizardForm step={2}>
|
||||
<Pricing />
|
||||
</WizardForm>
|
||||
</Tab.Pane>
|
||||
<Tab.Pane eventKey={3}>
|
||||
<WizardForm step={3}>
|
||||
<Amenities />
|
||||
</WizardForm>
|
||||
</Tab.Pane>
|
||||
<Tab.Pane eventKey={4}>
|
||||
<WizardForm step={4}>
|
||||
<AddPhotos title="Add room picture" images={images} />
|
||||
</WizardForm>
|
||||
</Tab.Pane>
|
||||
<Tab.Pane eventKey={5}>
|
||||
<WizardForm step={5}>
|
||||
<Preview />
|
||||
</WizardForm>
|
||||
</Tab.Pane>
|
||||
</Tab.Content>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
<RoomWizardFooter />
|
||||
</WizardFormProvider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddRoom;
|
||||
15
src/pages/apps/travel-agency/hotel/admin/RoomListing.tsx
Normal file
15
src/pages/apps/travel-agency/hotel/admin/RoomListing.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import PageBreadcrumb from 'components/common/PageBreadcrumb';
|
||||
import RoomListingTable from 'components/tables/RoomListingTable';
|
||||
import { defaultBreadcrumbItems } from 'data/commonData';
|
||||
|
||||
const RoomListing = () => {
|
||||
return (
|
||||
<div className="mb-9">
|
||||
<PageBreadcrumb className="mb-3" items={defaultBreadcrumbItems} />
|
||||
<h2>Room Listing</h2>
|
||||
<RoomListingTable />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RoomListing;
|
||||
144
src/pages/apps/travel-agency/hotel/admin/SearchRoom.tsx
Normal file
144
src/pages/apps/travel-agency/hotel/admin/SearchRoom.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import {
|
||||
faCalendarAlt,
|
||||
faChevronRight,
|
||||
faFilter,
|
||||
faRotate,
|
||||
faSearch
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import Button from 'components/base/Button';
|
||||
import DatePicker from 'components/base/DatePicker';
|
||||
import PageBreadcrumb from 'components/common/PageBreadcrumb';
|
||||
import RoomCard from 'components/modules/travel-agency/hotel/search-room/RoomCard';
|
||||
import RoomFilterOffcanvas from 'components/modules/travel-agency/hotel/search-room/RoomFilterOffcanvas';
|
||||
import RoomFilterOffcanvasContent from 'components/modules/travel-agency/hotel/search-room/RoomFilterOffcanvasContent';
|
||||
import { defaultBreadcrumbItems } from 'data/commonData';
|
||||
import { useState } from 'react';
|
||||
import { Row, Col, Form, FloatingLabel } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { roomsSearchData } from 'data/travel-agency/customer/hotel';
|
||||
|
||||
const SearchRoom = () => {
|
||||
const [openOffcanvas, setOpenOffcanvas] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageBreadcrumb items={defaultBreadcrumbItems} className="mb-3" />
|
||||
<div className="mb-9">
|
||||
<Row className="align-items-end mb-5 gy-3">
|
||||
<Col style={{ maxWidth: 290 }}>
|
||||
<h2>Rooms</h2>
|
||||
</Col>
|
||||
<Col xl>
|
||||
<Row className="gx-2 gx-xl-3 gy-3">
|
||||
<Col
|
||||
xs={{ order: 1 }}
|
||||
sm={{ span: 'auto', order: 0 }}
|
||||
className="me-sm-2 d-xl-none"
|
||||
>
|
||||
<Button
|
||||
variant="phoenix-secondary"
|
||||
size="lg"
|
||||
className="text-body-tertiary w-100"
|
||||
onClick={() => setOpenOffcanvas(true)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faFilter} className="me-2" />
|
||||
Filter
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xs sm={5} xxl={3}>
|
||||
<DatePicker
|
||||
render={(_, ref) => {
|
||||
return (
|
||||
<FloatingLabel
|
||||
label="Select Time Range"
|
||||
className="w-auto"
|
||||
>
|
||||
<Form.Control
|
||||
type="text"
|
||||
placeholder="start date"
|
||||
ref={ref}
|
||||
id="startDatepicker"
|
||||
className="ps-3"
|
||||
/>
|
||||
|
||||
<FontAwesomeIcon
|
||||
icon={faCalendarAlt}
|
||||
className="position-absolute top-0 end-0 mt-3 me-3"
|
||||
/>
|
||||
</FloatingLabel>
|
||||
);
|
||||
}}
|
||||
hideIcon={true}
|
||||
options={{
|
||||
mode: 'range',
|
||||
minDate: 'today',
|
||||
dateFormat: 'Y-m-d'
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col xs sm="auto" className="flex-grow-0">
|
||||
<Button
|
||||
variant="phoenix-primary"
|
||||
size="lg"
|
||||
className="px-xxl-6 text-nowrap"
|
||||
>
|
||||
<span className="d-none d-xl-inline-block">Update</span>
|
||||
<FontAwesomeIcon icon={faSearch} className="fs-9 ms-xl-2" />
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xs sm="auto" className="ms-auto flex-grow-0">
|
||||
<Button
|
||||
variant="phoenix-secondary"
|
||||
size="lg"
|
||||
className="ms-auto text-nowrap"
|
||||
>
|
||||
<span className="d-none d-xl-inline-block">Refresh</span>
|
||||
<FontAwesomeIcon icon={faRotate} className="fs-9 ms-xl-2" />
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
{/* header section end */}
|
||||
|
||||
<Row className="gx-6">
|
||||
{/* offcanvas start */}
|
||||
<Col xl="auto" className="d-none d-xl-block">
|
||||
<div className="phoenix-room-filter-offcanvas bg-body scrollbar">
|
||||
<RoomFilterOffcanvasContent />
|
||||
</div>
|
||||
</Col>
|
||||
{/* offcanvas end */}
|
||||
<Col className="w-xl-25">
|
||||
{roomsSearchData.map((item, index) => (
|
||||
<RoomCard
|
||||
key={index}
|
||||
data={item}
|
||||
isLastItem={roomsSearchData.length - 1 === index}
|
||||
/>
|
||||
))}
|
||||
<div className="border p-3 rounded-3 mt-5 d-flex flex-end-center gap-3 gap-sm-6 flex-wrap">
|
||||
<h2 className="text-body mb-0">
|
||||
<span className="fs-9 text-body-tertiary fw-bold me-2">
|
||||
Total :
|
||||
</span>
|
||||
04
|
||||
</h2>
|
||||
<Link to="#!">
|
||||
<Button variant="primary" className="px-sm-7">
|
||||
Confirm Booking
|
||||
<FontAwesomeIcon icon={faChevronRight} className="ms-2" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<RoomFilterOffcanvas open={openOffcanvas} setOpen={setOpenOffcanvas} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchRoom;
|
||||
251
src/pages/apps/travel-agency/hotel/customer/HotelCheckout.tsx
Normal file
251
src/pages/apps/travel-agency/hotel/customer/HotelCheckout.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import TravelFooter from 'components/footers/TravelFooter';
|
||||
import PageBreadcrumb from 'components/common/PageBreadcrumb';
|
||||
import { defaultBreadcrumbItems } from 'data/commonData';
|
||||
import { Container, Row, Col, Form } from 'react-bootstrap';
|
||||
import HotelDetailsSummaryCard from 'components/cards/HotelDetailsSummaryCard';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faChevronRight, faCircle } from '@fortawesome/free-solid-svg-icons';
|
||||
import Button from 'components/base/Button';
|
||||
import ResizableNavbar from 'components/navbars/travel-agency/ResizableNavbar';
|
||||
import { hotelNavItems } from 'data/travel-agency/resizableNav';
|
||||
|
||||
const HotelCheckout = () => {
|
||||
return (
|
||||
<>
|
||||
<ResizableNavbar navItems={hotelNavItems} />
|
||||
<section className="pt-6 pb-9">
|
||||
<Container fluid="medium">
|
||||
<PageBreadcrumb items={defaultBreadcrumbItems} className="mb-3" />
|
||||
<h2 className="mb-5">Check out</h2>
|
||||
<Row className="justify-content-between">
|
||||
<Col lg={7} xl={6}>
|
||||
<Form id="checkoutForm1" onSubmit={e => e.preventDefault()}>
|
||||
<hr className="mt-0 mb-7" />
|
||||
<h3 className="fw-bold mb-5">Enter your details</h3>
|
||||
<h5 className="mb-3">Are you travelling for work?</h5>
|
||||
<Form.Check
|
||||
id="tripTypeRadio"
|
||||
className="form-check-inline me-4"
|
||||
>
|
||||
<Form.Check.Input
|
||||
type="radio"
|
||||
name="tripTypeRadio"
|
||||
value="no"
|
||||
defaultChecked
|
||||
/>
|
||||
<Form.Check.Label htmlFor="tripTypeRadio">
|
||||
No
|
||||
</Form.Check.Label>
|
||||
</Form.Check>
|
||||
<Form.Check id="tripTypeRadio" className="form-check-inline">
|
||||
<Form.Check.Input
|
||||
type="radio"
|
||||
name="tripTypeRadio"
|
||||
value="yes"
|
||||
/>
|
||||
<Form.Check.Label htmlFor="tripTypeRadio">
|
||||
Yes
|
||||
</Form.Check.Label>
|
||||
</Form.Check>
|
||||
<Row className="g-3 mb-5 mt-1">
|
||||
<Col sm={6}>
|
||||
<label
|
||||
htmlFor="first-name"
|
||||
className="fw-bold text-body-highlight mb-1"
|
||||
>
|
||||
First name
|
||||
</label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
id="first-name"
|
||||
placeholder="First name"
|
||||
/>
|
||||
</Col>
|
||||
<Col sm={6}>
|
||||
<label
|
||||
htmlFor="last-name"
|
||||
className="fw-bold text-body-highlight mb-1"
|
||||
>
|
||||
Last name
|
||||
</label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
id="last-name"
|
||||
placeholder="Last name"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="g-3">
|
||||
<Col sm={6}>
|
||||
<label
|
||||
htmlFor="email-address"
|
||||
className="fw-bold text-body-highlight mb-1"
|
||||
>
|
||||
Email address
|
||||
</label>
|
||||
<Form.Control
|
||||
type="email"
|
||||
id="email-address"
|
||||
placeholder="Email address"
|
||||
/>
|
||||
</Col>
|
||||
<Col sm={6}>
|
||||
<label
|
||||
htmlFor="confirm-email-address"
|
||||
className="fw-bold text-body-highlight mb-1"
|
||||
>
|
||||
Confirm email address
|
||||
</label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
id="confirm-email-address"
|
||||
placeholder="Confirm email address "
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<h5 className="mb-3 mt-7">Who are you booking for?</h5>
|
||||
<Form.Check
|
||||
id="bookingPersonRadio"
|
||||
className="form-check-inline me-4"
|
||||
>
|
||||
<Form.Check.Input
|
||||
type="radio"
|
||||
name="bookingPersonRadio"
|
||||
id="me"
|
||||
value="no"
|
||||
defaultChecked
|
||||
/>
|
||||
<Form.Check.Label htmlFor="me">
|
||||
I am the main guest
|
||||
</Form.Check.Label>
|
||||
</Form.Check>
|
||||
<Form.Check
|
||||
id="bookingPersonRadio"
|
||||
className="form-check-inline"
|
||||
>
|
||||
<Form.Check.Input
|
||||
type="radio"
|
||||
name="bookingPersonRadio"
|
||||
value="yes"
|
||||
id="else"
|
||||
/>
|
||||
<Form.Check.Label htmlFor="else">
|
||||
I am booking for somebody else
|
||||
</Form.Check.Label>
|
||||
</Form.Check>
|
||||
<h5 className="mb-3 mt-6">Add to your stay</h5>
|
||||
<Form.Check className="mb-4">
|
||||
<Form.Check.Input type="checkbox" id="airportShuttle" />
|
||||
<Form.Check.Label
|
||||
htmlFor="airportShuttle"
|
||||
className="fw-normal fs-8 text-body"
|
||||
>
|
||||
I am interested in requesting an airport shuttle
|
||||
<span className="d-block fs-9 text-body-tertiary">
|
||||
We'll tell your accommodation what you're interested in so
|
||||
they can provide details and costs.
|
||||
</span>
|
||||
</Form.Check.Label>
|
||||
</Form.Check>
|
||||
<Form.Check>
|
||||
<Form.Check.Input type="checkbox" id="rentingCar" />
|
||||
<Form.Check.Label
|
||||
htmlFor="rentingCar"
|
||||
className="fw-normal fs-8 text-body"
|
||||
>
|
||||
I'm interested in renting a car
|
||||
<span className="d-block fs-9 text-body-tertiary">
|
||||
Make the most of your trip and check the car rental
|
||||
options in your booking confirmation.
|
||||
</span>
|
||||
</Form.Check.Label>
|
||||
</Form.Check>
|
||||
<h5 className="mb-3 mt-6">Your arrival time</h5>
|
||||
<Row className="gx-2">
|
||||
<Col xs={6} sm={3}>
|
||||
<Form.Select role="select-box">
|
||||
<option value="1">12:00</option>
|
||||
<option value="2">03:00</option>
|
||||
<option value="3">06:00</option>
|
||||
<option value="4">09:00</option>
|
||||
</Form.Select>
|
||||
</Col>
|
||||
<Col xs={6} sm={3}>
|
||||
<Form.Select role="select-box">
|
||||
<option value="am">AM</option>
|
||||
<option value="pm">PM</option>
|
||||
</Form.Select>
|
||||
</Col>
|
||||
</Row>
|
||||
<h5 className="mb-3 mt-7">Review house rules</h5>
|
||||
<p>
|
||||
Your host would like you to agree to the following house
|
||||
rules:
|
||||
</p>
|
||||
<p className="mb-2">
|
||||
<FontAwesomeIcon
|
||||
icon={faCircle}
|
||||
className="text-body-quaternary fs-10 me-2"
|
||||
transform="up-2"
|
||||
/>
|
||||
No smoking
|
||||
</p>
|
||||
<p>
|
||||
<FontAwesomeIcon
|
||||
icon={faCircle}
|
||||
className="text-body-quaternary fs-10 me-2"
|
||||
transform="up-2"
|
||||
/>
|
||||
Pets are not allowed
|
||||
</p>
|
||||
<p className="text-info mb-7">
|
||||
By continuing to the next step, you are agreeing to these
|
||||
house rules.
|
||||
</p>
|
||||
<h5 className="mb-3">Special requests</h5>
|
||||
<p className="fs-9 text-body-tertiary mb-4">
|
||||
Special requests cannot be guaranteed, but the property will
|
||||
do its best to meet your needs. You can always make a special
|
||||
request after your booking is complete!
|
||||
</p>
|
||||
<Form.Control
|
||||
as="textarea"
|
||||
name="requestText"
|
||||
rows={5}
|
||||
id="requestText"
|
||||
placeholder="Type your request"
|
||||
/>
|
||||
<hr className="mt-7 mb-5" />
|
||||
<Link to="/apps/travel-agency/hotel/customer/payment">
|
||||
<Button
|
||||
variant="primary"
|
||||
endIcon={
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronRight}
|
||||
className="ms-2"
|
||||
transform="shrink-3"
|
||||
/>
|
||||
}
|
||||
>
|
||||
Final details
|
||||
</Button>
|
||||
</Link>
|
||||
</Form>
|
||||
</Col>
|
||||
<Col lg={5} xl={4}>
|
||||
<HotelDetailsSummaryCard
|
||||
showHotelInfo={true}
|
||||
className="mt-5 mt-lg-0"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</section>
|
||||
<TravelFooter />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HotelCheckout;
|
||||
64
src/pages/apps/travel-agency/hotel/customer/HotelCompare.tsx
Normal file
64
src/pages/apps/travel-agency/hotel/customer/HotelCompare.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import PageBreadcrumb from 'components/common/PageBreadcrumb';
|
||||
import { defaultBreadcrumbItems } from 'data/commonData';
|
||||
import EcomTopRegionsMap from 'components/leaflet-maps/EcomTopRegionsMap';
|
||||
import { mapMarkerPoints } from 'data/mapMarkerPoints';
|
||||
import CollapsibleContainer from 'components/common/CollapsibleContainer';
|
||||
import CompareHotelDetails from 'components/modules/travel-agency/hotel/hotel-compare/CompareHotelDetails';
|
||||
import {
|
||||
hotelInfo,
|
||||
popularAmenitiesFields,
|
||||
reviewFields
|
||||
} from 'data/travel-agency/customer/hotelCompare';
|
||||
import CompareRoomDetails from 'components/modules/travel-agency/hotel/hotel-compare/CompareRoomDetails';
|
||||
import HotelActions from 'components/modules/travel-agency/hotel/HotelActions';
|
||||
import { Container } from 'react-bootstrap';
|
||||
import TravelFooter from 'components/footers/TravelFooter';
|
||||
import ResizableNavbar from 'components/navbars/travel-agency/ResizableNavbar';
|
||||
import { hotelNavItems } from 'data/travel-agency/resizableNav';
|
||||
|
||||
const HotelCompare = () => {
|
||||
return (
|
||||
<>
|
||||
<ResizableNavbar navItems={hotelNavItems} />
|
||||
<section className="pt-6 pb-9">
|
||||
<Container fluid="medium">
|
||||
<PageBreadcrumb items={defaultBreadcrumbItems} className="mb-3" />
|
||||
<h2 className="mb-4">Hotel Compare</h2>
|
||||
<HotelActions background={false} />
|
||||
<div
|
||||
className="w-100 border rounded-3 overflow-hidden my-5"
|
||||
style={{
|
||||
height: 220
|
||||
}}
|
||||
>
|
||||
<EcomTopRegionsMap data={mapMarkerPoints} />
|
||||
</div>
|
||||
<div className="position-relative scrollbar">
|
||||
<CollapsibleContainer
|
||||
collapseTitle="Hotel Details"
|
||||
id="hotelDetailsCollapse"
|
||||
>
|
||||
<CompareHotelDetails
|
||||
hotelInfo={hotelInfo}
|
||||
reviewFields={reviewFields}
|
||||
/>
|
||||
</CollapsibleContainer>
|
||||
<CollapsibleContainer
|
||||
collapseTitle="Room Details"
|
||||
id="roomDetailsCollapse"
|
||||
className="mt-8"
|
||||
>
|
||||
<CompareRoomDetails
|
||||
hotelInfo={hotelInfo}
|
||||
reviewFields={popularAmenitiesFields}
|
||||
/>
|
||||
</CollapsibleContainer>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
<TravelFooter />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HotelCompare;
|
||||
109
src/pages/apps/travel-agency/hotel/customer/HotelDetails.tsx
Normal file
109
src/pages/apps/travel-agency/hotel/customer/HotelDetails.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import PageBreadcrumb from 'components/common/PageBreadcrumb';
|
||||
import { defaultBreadcrumbItems } from 'data/commonData';
|
||||
import { Container, Row, Col } from 'react-bootstrap';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import Badge from 'components/base/Badge';
|
||||
import Button from 'components/base/Button';
|
||||
import {
|
||||
faEnvelope,
|
||||
faMap,
|
||||
faMapMarkerAlt,
|
||||
faPhone
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import HotelDetailsSummaryCard from 'components/cards/HotelDetailsSummaryCard';
|
||||
import { hotelImages } from 'data/travel-agency/customer/hotelDetails';
|
||||
import HotelDetailsTab from 'components/modules/travel-agency/hotel/hotel-details/HotelDetailsTab';
|
||||
import HotelDetailsGallery from 'components/image-gallery/HotelDetailsGallery';
|
||||
import { numberFormat } from 'helpers/utils';
|
||||
import TravelFooter from 'components/footers/TravelFooter';
|
||||
import ResizableNavbar from 'components/navbars/travel-agency/ResizableNavbar';
|
||||
import { hotelNavItems } from 'data/travel-agency/resizableNav';
|
||||
|
||||
const HotelDetails = () => {
|
||||
return (
|
||||
<>
|
||||
<ResizableNavbar navItems={hotelNavItems} />
|
||||
<section className="pt-4 pb-9">
|
||||
<Container fluid="medium">
|
||||
<PageBreadcrumb items={defaultBreadcrumbItems} className="mb-3" />
|
||||
<h2 className="mb-4">Hotel Details</h2>
|
||||
<Row className="g-4 flex-between-end mb-5">
|
||||
<Col md={8} lg={9}>
|
||||
<h1 className="mb-2 fw-semibold">
|
||||
Radisson Blu Water Garden Hotel, Dhaka
|
||||
</h1>
|
||||
<div className="mb-1">
|
||||
<Link className="text-body-tertiary" to="#!">
|
||||
<FontAwesomeIcon
|
||||
icon={faMapMarkerAlt}
|
||||
className="me-2 text-body"
|
||||
/>
|
||||
Airport Rd, Dhaka Cantonment, Dhaka, 1206, Bangladesh
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mb-1">
|
||||
<Link className="text-body-tertiary" to="tel:+88029834555">
|
||||
<FontAwesomeIcon icon={faPhone} className="me-2 text-body" />
|
||||
+880 29834555
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mb-1">
|
||||
<Link
|
||||
className="text-body-tertiary"
|
||||
to="mailto:sales.dhaka@radisson.com"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faEnvelope}
|
||||
className="me-2 text-body"
|
||||
transform="down-1"
|
||||
/>
|
||||
sales.dhaka@radisson.com
|
||||
</Link>
|
||||
</div>
|
||||
</Col>
|
||||
<Col md={4} lg={3}>
|
||||
<div className="d-flex flex-md-column align-items-center align-items-md-end gap-3">
|
||||
<h5 className="mb-0 text-nowrap">
|
||||
<span className="text-body-tertiary me-2 fw-normal">
|
||||
Rated
|
||||
</span>
|
||||
<span className="text-primary me-2">Good</span>
|
||||
<Badge bg="primary">
|
||||
{numberFormat(4.3, 'standard', {
|
||||
minimumFractionDigits: 1,
|
||||
maximumFractionDigits: 1
|
||||
})}
|
||||
</Badge>
|
||||
</h5>
|
||||
<Button
|
||||
variant="phoenix-primary"
|
||||
className="px-5 px-lg-8 w-100 w-md-auto"
|
||||
startIcon={<FontAwesomeIcon icon={faMap} className="me-2" />}
|
||||
>
|
||||
Show in map
|
||||
</Button>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="g-3">
|
||||
<Col xl={8}>
|
||||
<HotelDetailsGallery images={hotelImages} />
|
||||
<HotelDetailsTab />
|
||||
</Col>
|
||||
<Col xl={4}>
|
||||
<HotelDetailsSummaryCard
|
||||
showHotelInfo={false}
|
||||
className="mt-3 mt-xl-0"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</section>
|
||||
<TravelFooter />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HotelDetails;
|
||||
27
src/pages/apps/travel-agency/hotel/customer/HotelGallery.tsx
Normal file
27
src/pages/apps/travel-agency/hotel/customer/HotelGallery.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import PageBreadcrumb from 'components/common/PageBreadcrumb';
|
||||
import { defaultBreadcrumbItems } from 'data/commonData';
|
||||
import HotelGalleryImages from 'components/modules/travel-agency/hotel/HotelGalleryImages';
|
||||
import { galleryItems } from 'data/travel-agency/customer/gallery';
|
||||
import { Container } from 'react-bootstrap';
|
||||
import TravelFooter from 'components/footers/TravelFooter';
|
||||
import ResizableNavbar from 'components/navbars/travel-agency/ResizableNavbar';
|
||||
import { hotelNavItems } from 'data/travel-agency/resizableNav';
|
||||
|
||||
const HotelGallery = () => {
|
||||
return (
|
||||
<>
|
||||
<ResizableNavbar navItems={hotelNavItems} />
|
||||
<section className="pt-6 pb-9">
|
||||
<Container fluid="medium">
|
||||
<PageBreadcrumb items={defaultBreadcrumbItems} className="mb-3" />
|
||||
<h2 className="mb-5">Gallery</h2>
|
||||
<HotelGalleryImages galleryItems={galleryItems} />
|
||||
</Container>
|
||||
</section>
|
||||
<TravelFooter />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HotelGallery;
|
||||
123
src/pages/apps/travel-agency/hotel/customer/HotelPayment.tsx
Normal file
123
src/pages/apps/travel-agency/hotel/customer/HotelPayment.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import PageBreadcrumb from 'components/common/PageBreadcrumb';
|
||||
import { defaultBreadcrumbItems } from 'data/commonData';
|
||||
import { Container, Row, Col, Form } from 'react-bootstrap';
|
||||
import HotelDetailsSummaryCard from 'components/cards/HotelDetailsSummaryCard';
|
||||
import PaymentMethodForm from 'components/forms/PaymentMethodForm';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import Button from 'components/base/Button';
|
||||
import { Link } from 'react-router-dom';
|
||||
import TravelFooter from 'components/footers/TravelFooter';
|
||||
import ResizableNavbar from 'components/navbars/travel-agency/ResizableNavbar';
|
||||
import { hotelNavItems } from 'data/travel-agency/resizableNav';
|
||||
|
||||
const HotelPayment = () => {
|
||||
return (
|
||||
<>
|
||||
<ResizableNavbar navItems={hotelNavItems} />
|
||||
<section className="pt-6 pb-9">
|
||||
<Container fluid="medium">
|
||||
<PageBreadcrumb items={defaultBreadcrumbItems} className="mb-3" />
|
||||
<h2 className="mb-5">Payment</h2>
|
||||
<Row className="justify-content-between">
|
||||
<Col lg={7} xl={6}>
|
||||
<Form onSubmit={e => e.preventDefault()}>
|
||||
<Link to="/apps/travel-agency/hotel/customer/checkout">
|
||||
<Button
|
||||
variant="phoenix-primary"
|
||||
startIcon={
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronLeft}
|
||||
className="me-2"
|
||||
transform="shrink-3"
|
||||
/>
|
||||
}
|
||||
>
|
||||
Go back
|
||||
</Button>
|
||||
</Link>
|
||||
<hr className="mt-5 mb-7" />
|
||||
<h3 className="mb-5">Enter your address</h3>
|
||||
<Row className="g-3 mb-5">
|
||||
<Col sm={3}>
|
||||
<label
|
||||
htmlFor="country"
|
||||
className="fw-bold text-body-highlight mb-1"
|
||||
>
|
||||
Country
|
||||
</label>
|
||||
<Form.Select id="country">
|
||||
<option value="1">India</option>
|
||||
<option value="2">USA</option>
|
||||
<option value="3">UAE</option>
|
||||
</Form.Select>
|
||||
</Col>
|
||||
<Col sm={5} lg={4}>
|
||||
<label
|
||||
htmlFor="phone-number"
|
||||
className="fw-bold text-body-highlight mb-1"
|
||||
>
|
||||
Phone number
|
||||
</label>
|
||||
<Form.Control
|
||||
type="number"
|
||||
id="phone-number"
|
||||
placeholder="Enter phone number"
|
||||
className="input-spin-none"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="g-3">
|
||||
<Col sm={8} lg={7}>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="fw-bold text-body-highlight mb-1"
|
||||
>
|
||||
Email address
|
||||
</label>
|
||||
<Form.Control
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Enter email address"
|
||||
id="email"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<PaymentMethodForm />
|
||||
<hr className="mt-6 mb-5" />
|
||||
<Link to="/apps/travel-agency/hotel/customer/checkout">
|
||||
<Button
|
||||
variant="phoenix-primary"
|
||||
className="me-3"
|
||||
startIcon={
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronLeft}
|
||||
className="me-2"
|
||||
transform="shrink-3"
|
||||
/>
|
||||
}
|
||||
>
|
||||
Go back
|
||||
</Button>
|
||||
</Link>
|
||||
<Button variant="primary" className="px-sm-15">
|
||||
Confirm booking
|
||||
</Button>
|
||||
</Form>
|
||||
</Col>
|
||||
<Col lg={5} xl={4}>
|
||||
<HotelDetailsSummaryCard
|
||||
showHotelInfo={true}
|
||||
className="mt-5 mt-lg-0"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</section>
|
||||
<TravelFooter />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HotelPayment;
|
||||
@@ -0,0 +1,65 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Col, Form, Row } from 'react-bootstrap';
|
||||
import Button from 'components/base/Button';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faFilter, faMap } from '@fortawesome/free-solid-svg-icons';
|
||||
import HotelCard from 'components/cards/HotelCard';
|
||||
import { hotels } from 'data/travel-agency/customer/hotel';
|
||||
import NavbarHome from 'components/navbars/travel-agency/NavbarHome';
|
||||
import HotelActions from 'components/modules/travel-agency/hotel/HotelActions';
|
||||
import TravelFooter from 'components/footers/TravelFooter';
|
||||
import ResizableNavbar from 'components/navbars/travel-agency/ResizableNavbar';
|
||||
import { hotelNavItems } from 'data/travel-agency/resizableNav';
|
||||
import HomepageFilterOffcanvas from 'components/modules/travel-agency/hotel/HomepageFilterOffcanvas';
|
||||
|
||||
const HotelHomepage = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ResizableNavbar navItems={hotelNavItems} />
|
||||
<section className="container-small py-0">
|
||||
<NavbarHome currentPage="Hotel" />
|
||||
</section>
|
||||
<HotelActions background={true} />
|
||||
<section className="container-medium py-0">
|
||||
<div className="py-6">
|
||||
<div className="d-flex">
|
||||
<Form.Select className="w-sm-auto me-4">
|
||||
<option>Sort by</option>
|
||||
<option>Best reviewed and lowest price</option>
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
</Form.Select>
|
||||
<Button
|
||||
variant="phoenix-secondary"
|
||||
className="text-nowrap px-3 px-md-4 ms-auto me-2"
|
||||
>
|
||||
<FontAwesomeIcon icon={faMap} className="me-md-2" />
|
||||
<span className="d-none d-md-inline-block">Show in map</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="phoenix-secondary"
|
||||
className="text-nowrap px-3"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faFilter} className="me-md-2" />
|
||||
<span className="d-none d-md-inline-block">Filters</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Row className="g-3 mb-6">
|
||||
{hotels.map((hotelInfo, index) => (
|
||||
<Col key={index} sm={6} lg={4} xl={3}>
|
||||
<HotelCard hotelInfo={hotelInfo} />
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</section>
|
||||
<TravelFooter />
|
||||
<HomepageFilterOffcanvas isOpen={isOpen} setIsOpen={setIsOpen} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HotelHomepage;
|
||||
117
src/pages/apps/travel-agency/landing/BestHotel.tsx
Normal file
117
src/pages/apps/travel-agency/landing/BestHotel.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
import { faChevronRight, faStar } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import bgLeft29 from 'assets/img/bg/bg-left-29.png';
|
||||
|
||||
import Badge from 'components/base/Badge';
|
||||
import Button from 'components/base/Button';
|
||||
import { Card, Col, Row } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import FeatherIcon from 'feather-icons-react';
|
||||
import { faHeart } from '@fortawesome/free-regular-svg-icons';
|
||||
import { hotelInterFace, hotelsData } from 'data/travel-agency/landing';
|
||||
|
||||
const HotelDetails = (data: hotelInterFace) => {
|
||||
const { image, rating, stay, name, located, price } = data;
|
||||
return (
|
||||
<Card className="card-img-shift border-0 mx-auto">
|
||||
<div className="rounded-3 overflow-hidden w-100 position-relative z-5">
|
||||
<img src={image} alt="" className="w-100" height="250" />
|
||||
<button className="btn btn-wish position-absolute top-0 end-0 mt-3 me-3">
|
||||
<FontAwesomeIcon icon={faHeart} />
|
||||
</button>
|
||||
</div>
|
||||
<Card.Body className="p-0">
|
||||
<div className="card-content">
|
||||
<div className="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-4">
|
||||
<div>
|
||||
<Badge
|
||||
variant="phoenix"
|
||||
bg={data.status.type}
|
||||
className="px-1 me-2"
|
||||
>
|
||||
{data.status.label}
|
||||
</Badge>
|
||||
<Badge variant="phoenix" bg={data.package.type} className="px-1">
|
||||
{data.package.label}
|
||||
</Badge>
|
||||
</div>
|
||||
<h6>
|
||||
<FontAwesomeIcon icon={faStar} className="text-warning me-1" />
|
||||
{rating} ({stay}k stay)
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
to="#!"
|
||||
className="fw-bold fs-7 text-body-emphasis mb-2 text-primary-hover"
|
||||
>
|
||||
{name}
|
||||
</Link>
|
||||
<Link to="#!" className="fw-semibold text-body-tertiary mb-3 d-block">
|
||||
<FeatherIcon
|
||||
icon="map-pin"
|
||||
className="me-1"
|
||||
style={{ width: 16, height: 16 }}
|
||||
/>
|
||||
{located}
|
||||
</Link>
|
||||
<h6 className="fe-semibold text-body-tertiary d-flex align-items-center gap-1 mb-4">
|
||||
From
|
||||
<span className="fw-bolder fs-7 text-body-highlight">${price}</span>
|
||||
/ per night
|
||||
</h6>
|
||||
<Button variant="primary" className="px-5">
|
||||
Book Now
|
||||
</Button>
|
||||
</div>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
const BestHotel = () => {
|
||||
return (
|
||||
<section className="py-0">
|
||||
<div
|
||||
className="bg-holder d-none d-xl-block"
|
||||
style={{
|
||||
backgroundImage: `url(${bgLeft29})`,
|
||||
backgroundPosition: '-15%',
|
||||
backgroundSize: 'auto'
|
||||
}}
|
||||
/>
|
||||
<div className="position-relative container-medium">
|
||||
<h3 className="mb-2 text-body-emphasis text-center text-xl-start">
|
||||
The best of our hotel
|
||||
</h3>
|
||||
<div className="d-xl-flex justify-content-between mb-5 text-center">
|
||||
<p className="mb-0 text-body-tertiary">
|
||||
This list will help you get insights into how much you’ll need to
|
||||
spend to afford accommodation.
|
||||
</p>
|
||||
<Button variant="link" className="p-0 fs-8">
|
||||
View all
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronRight}
|
||||
transform="shrink-3"
|
||||
className="ms-2"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<Row className="g-0 justify-content-center">
|
||||
<Col sm={11} md={8} lg={6} xl={12}>
|
||||
<Row className="gy-5 gx-xl-7 justify-content-between pe-4">
|
||||
{hotelsData.map((data, index) => (
|
||||
<Col xl={4} key={index}>
|
||||
<HotelDetails {...data} />
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default BestHotel;
|
||||
136
src/pages/apps/travel-agency/landing/BestPlaces.tsx
Normal file
136
src/pages/apps/travel-agency/landing/BestPlaces.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import React from 'react';
|
||||
import bgLeft28 from 'assets/img/bg/bg-left-28.png';
|
||||
import bgRight28 from 'assets/img/bg/bg-right-28.png';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faChevronLeft,
|
||||
faChevronRight,
|
||||
faHotel,
|
||||
faTreeCity
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Autoplay, Navigation } from 'swiper/modules';
|
||||
import SwiperCore from 'swiper';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { Container } from 'react-bootstrap';
|
||||
import { placesData } from 'data/travel-agency/landing';
|
||||
|
||||
const BestPlaces = () => {
|
||||
SwiperCore.use([Autoplay]);
|
||||
|
||||
return (
|
||||
<section className="pb-10 pt-0">
|
||||
<div
|
||||
className="bg-holder d-none d-md-block"
|
||||
style={{
|
||||
backgroundImage: `url(${bgLeft28})`,
|
||||
backgroundPosition: 'left 27%',
|
||||
backgroundSize: '7%'
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="bg-holder d-none d-md-block"
|
||||
style={{
|
||||
backgroundImage: `url(${bgRight28})`,
|
||||
backgroundPosition: 'right -25px',
|
||||
backgroundSize: '16%'
|
||||
}}
|
||||
/>
|
||||
<div className="container-medium text-center mb-11 position-relative">
|
||||
<h3 className="mb-2 text-body-emphasis">Travel more, spend less</h3>
|
||||
<p className="text-body-tertiary mb-0">
|
||||
Working with Phoenix means you’ll have all the plans and the perfect
|
||||
price list to help you plan.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* swiper */}
|
||||
<Container fluid className="px-sm-0">
|
||||
<div className="swiper-theme-container swiper-slide-nav-top">
|
||||
<div className="swiper-nav">
|
||||
<div className="swiper-button-next">
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronRight}
|
||||
className="text-primary"
|
||||
transform="shrink-3"
|
||||
/>
|
||||
</div>
|
||||
<div className="swiper-button-prev">
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronLeft}
|
||||
className="text-primary"
|
||||
transform="shrink-3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Swiper
|
||||
loop
|
||||
centeredSlides
|
||||
autoplay
|
||||
centeredSlidesBounds
|
||||
spaceBetween={16}
|
||||
slidesPerView={1}
|
||||
speed={1500}
|
||||
breakpoints={{
|
||||
576: {
|
||||
slidesPerView: 'auto'
|
||||
}
|
||||
}}
|
||||
wrapperClass="swiper-wrapper"
|
||||
className="theme-slider"
|
||||
navigation={{
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}}
|
||||
modules={[Navigation]}
|
||||
>
|
||||
{placesData.map((data, index) => (
|
||||
<SwiperSlide className="w-sm-auto" key={index}>
|
||||
<Link
|
||||
to="#!"
|
||||
className="position-relative rounded-3 overflow-hidden d-block"
|
||||
>
|
||||
<img
|
||||
src={data.img}
|
||||
alt=""
|
||||
className="w-100 w-sm-auto object-fit-cover"
|
||||
height={220}
|
||||
/>
|
||||
<div className="img-backdrop-faded">
|
||||
<div className="image-reveal-content mb-3">
|
||||
<div className="d-flex align-items-center gap-2 mb-2">
|
||||
<FontAwesomeIcon
|
||||
icon={faHotel}
|
||||
className="text-secondary-lighter"
|
||||
/>
|
||||
<h6 className="mb-0 text-secondary-lighter fw-semibold">
|
||||
{data.hotels} Hotels
|
||||
</h6>
|
||||
</div>
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<FontAwesomeIcon
|
||||
icon={faTreeCity}
|
||||
className="text-secondary-lighter"
|
||||
/>
|
||||
<h6 className="mb-0 text-secondary-lighter fw-semibold">
|
||||
{data.packages} Tour Package
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<img src={data.flag} alt="" />
|
||||
<h4 className="mb-0 text-white">{data.country}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default BestPlaces;
|
||||
113
src/pages/apps/travel-agency/landing/Footer.tsx
Normal file
113
src/pages/apps/travel-agency/landing/Footer.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import { Row, Col } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import logo1 from 'assets/img/icons/logo-1.png';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faBehance,
|
||||
faFacebookF,
|
||||
faLinkedinIn,
|
||||
faTwitter
|
||||
} from '@fortawesome/free-brands-svg-icons';
|
||||
import bg41 from 'assets/img/bg/41.jpg';
|
||||
import classNames from 'classnames';
|
||||
|
||||
interface footerItems {
|
||||
title: string;
|
||||
link: string;
|
||||
}
|
||||
const footerItems: footerItems[] = [
|
||||
{
|
||||
title: 'Home',
|
||||
link: '#!'
|
||||
},
|
||||
{
|
||||
title: 'About',
|
||||
link: '#!'
|
||||
},
|
||||
{
|
||||
title: 'Contact',
|
||||
link: '#!'
|
||||
},
|
||||
{
|
||||
title: 'FAQ',
|
||||
link: '#!'
|
||||
},
|
||||
{
|
||||
title: 'Gallery',
|
||||
link: '#!'
|
||||
}
|
||||
];
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<section className="booking-footer pb-6 pb-md-11 pt-15">
|
||||
<div
|
||||
className="bg-holder"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.8) 0%,
|
||||
rgba(0, 0, 0, 0.8) 100%
|
||||
),
|
||||
url(${bg41})`,
|
||||
backgroundPosition: 'center',
|
||||
backgroundSize: 'cover',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
zIndex: '-1'
|
||||
}}
|
||||
/>
|
||||
<div className="container-medium">
|
||||
<Row className="gy-3 justify-content-between align-items-center">
|
||||
<Col xs="auto">
|
||||
<Link to="#!">
|
||||
<img src={logo1} alt="" />
|
||||
</Link>
|
||||
</Col>
|
||||
<Col xs="auto">
|
||||
<ul className="mb-0 list-unstyled d-flex flex-wrap">
|
||||
{footerItems.map((item, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={classNames('', {
|
||||
'me-sm-5 me-3': index !== footerItems.length - 1
|
||||
})}
|
||||
>
|
||||
<Link to={item.link} className="fs-8 fw-bold text-white">
|
||||
{item.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Col>
|
||||
</Row>
|
||||
<hr className="my-4" />
|
||||
<Row className="gy-3 justify-content-between">
|
||||
<Col xs="auto">
|
||||
<Link to="#!" className="me-4 text-white">
|
||||
<FontAwesomeIcon icon={faFacebookF} />
|
||||
</Link>
|
||||
<Link to="#!" className="me-4 text-white">
|
||||
<FontAwesomeIcon icon={faTwitter} />
|
||||
</Link>
|
||||
<Link to="#!" className="me-4 text-white">
|
||||
<FontAwesomeIcon icon={faLinkedinIn} />
|
||||
</Link>
|
||||
<Link to="#!" className="text-white">
|
||||
<FontAwesomeIcon icon={faBehance} />
|
||||
</Link>
|
||||
</Col>
|
||||
<Col xs="auto">
|
||||
<p className="mb-0 text-white">
|
||||
Thank you for creating with Phoenix | 2023 ©{' '}
|
||||
<Link to="https://themewagon.com/" className="text-white">
|
||||
Themewagon
|
||||
</Link>
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
148
src/pages/apps/travel-agency/landing/Gallery.tsx
Normal file
148
src/pages/apps/travel-agency/landing/Gallery.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import bgLeft30 from 'assets/img/bg/bg-left-30.png';
|
||||
import bgRight30 from 'assets/img/bg/bg-right-30.png';
|
||||
import IsotopeNav from 'components/navs/IsotopeNav';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { Col, Row } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faHeart } from '@fortawesome/free-regular-svg-icons';
|
||||
import Rating from 'components/base/Rating';
|
||||
import Button from 'components/base/Button';
|
||||
import { GalleryInterface, galleryItems } from 'data/travel-agency/landing';
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
eventKey: 'tokyo',
|
||||
label: 'Tokyo'
|
||||
},
|
||||
{
|
||||
eventKey: 'bali',
|
||||
label: 'Bali'
|
||||
},
|
||||
{
|
||||
eventKey: 'sydney',
|
||||
label: 'Sydney'
|
||||
},
|
||||
{
|
||||
eventKey: 'paris',
|
||||
label: 'Paris'
|
||||
}
|
||||
];
|
||||
|
||||
const GalleryItem = ({ galleryItem }: { galleryItem: GalleryInterface }) => {
|
||||
return (
|
||||
<Col xs={12} className="w-100">
|
||||
<div className="img-zoom-hover-lg rounded-2 overflow-hidden position-relative">
|
||||
<Link to="#!">
|
||||
<img
|
||||
className="w-100 object-fit-cover"
|
||||
height={220}
|
||||
src={galleryItem.img}
|
||||
alt=""
|
||||
/>
|
||||
</Link>
|
||||
<button className="btn btn-wish position-absolute top-0 end-0 mt-3 me-3">
|
||||
<FontAwesomeIcon icon={faHeart} />
|
||||
</button>
|
||||
<div className="backdrop-faded">
|
||||
<Link to="#!" className="fw-bolder fs-7 text-white streched-link">
|
||||
{galleryItem.location}
|
||||
</Link>
|
||||
<h5 className="text-light mb-0">
|
||||
{/* <FontAwesomeIcon icon={faStar} className="text-warning me-1" /> */}
|
||||
<Rating
|
||||
iconClass="me-1 fs-8 mb-1"
|
||||
initialValue={1}
|
||||
iconsCount={1}
|
||||
allowFraction={false}
|
||||
/>
|
||||
{galleryItem.rating}
|
||||
<span className="fs-10">/5 </span>({galleryItem.review}k review)
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
);
|
||||
};
|
||||
|
||||
const Gallery = () => {
|
||||
const [selectedCategory, setSelectedCategory] = useState(
|
||||
galleryItems[0].category
|
||||
);
|
||||
const initialgallery = galleryItems.filter(item =>
|
||||
item.category.includes(selectedCategory)
|
||||
);
|
||||
const [images, setImages] = useState(initialgallery);
|
||||
|
||||
const handleNavItemSelect = (category: string | null) => {
|
||||
setSelectedCategory(category || galleryItems[0].category);
|
||||
setImages(
|
||||
galleryItems.filter(item =>
|
||||
category ? item.category.includes(category) : true
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-10 overflow-hidden">
|
||||
<div
|
||||
className="bg-holder d-none d-xl-block"
|
||||
style={{
|
||||
backgroundImage: `url(${bgLeft30})`,
|
||||
backgroundPosition: 'left',
|
||||
backgroundSize: '40%',
|
||||
zIndex: '1'
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="bg-holder d-none d-xl-block"
|
||||
style={{
|
||||
backgroundImage: `url(${bgRight30})`,
|
||||
backgroundPosition: 'right 25px',
|
||||
backgroundSize: '26%',
|
||||
zIndex: '1'
|
||||
}}
|
||||
/>
|
||||
<div className="bg-booking-gallery" />
|
||||
<div className="container-medium position-relative z-2">
|
||||
<h3 className="mb-2 text-body-emphasis text-center">
|
||||
Popular Attractions
|
||||
</h3>
|
||||
<p className="mb-0 text-body-tertiary text-center mb-5">
|
||||
Explore the most popular and frequently visited destinations around
|
||||
the world
|
||||
</p>
|
||||
<IsotopeNav
|
||||
navItems={navItems}
|
||||
className="mb-5 justify-content-center w-max-content mx-auto"
|
||||
onSelect={handleNavItemSelect}
|
||||
/>
|
||||
<div className="row g-0 justify-content-center">
|
||||
<Col md={9} lg={7} xl={5}>
|
||||
<Row className="gx-0 gy-3">
|
||||
{images.map(gallery => (
|
||||
<GalleryItem galleryItem={gallery} key={gallery.img} />
|
||||
))}
|
||||
</Row>
|
||||
<div className="d-flex align-items-center justify-content-center gap-3 mt-4">
|
||||
<h5 className="mb-0">Explore more popular destination</h5>
|
||||
<div className="btn-ping">
|
||||
<div className="btn-ping-bg" />
|
||||
<Button
|
||||
variant="link"
|
||||
className="border p-0 fs-8 d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<FontAwesomeIcon icon={faArrowRight} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Gallery;
|
||||
82
src/pages/apps/travel-agency/landing/GetApp.tsx
Normal file
82
src/pages/apps/travel-agency/landing/GetApp.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import bgLeft33 from 'assets/img/bg/bg-left-33.png';
|
||||
import bgRight33 from 'assets/img/bg/bg-right-33.png';
|
||||
import iPhone from 'assets/img/spot-illustrations/i-phone.png';
|
||||
import iPhoneDark from 'assets/img/spot-illustrations/i-phone-dark.png';
|
||||
import spotIllustration41 from 'assets/img/spot-illustrations/41.png';
|
||||
import spotIllustrationDark41 from 'assets/img/spot-illustrations/dark_41.png';
|
||||
import { Col, Row } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import playStore from 'assets/img/generic/play-store.png';
|
||||
import appStore from 'assets/img/generic/app-store.png';
|
||||
|
||||
const GetApp = () => {
|
||||
return (
|
||||
<section className="pb-10 pt-9">
|
||||
<div
|
||||
className="bg-holder d-none d-xl-block"
|
||||
style={{
|
||||
backgroundImage: `url(${bgLeft33})`,
|
||||
backgroundPosition: '-8% 38px',
|
||||
backgroundSize: 'auto'
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="bg-holder d-none d-xl-block"
|
||||
style={{
|
||||
backgroundImage: `url(${bgRight33})`,
|
||||
backgroundPosition: 'right',
|
||||
backgroundSize: '18%'
|
||||
}}
|
||||
/>
|
||||
<div className="bg-get-app" />
|
||||
<div className="container-medium position-relative">
|
||||
<Row className="g-0 justify-content-center">
|
||||
<Col lg={10} xl={8} xxl={7}>
|
||||
<div className="d-md-flex align-items-center gap-5 text-center text-md-start">
|
||||
<img
|
||||
src={iPhone}
|
||||
alt=""
|
||||
style={{ maxHeight: '540px' }}
|
||||
className="d-dark-none img-fluid"
|
||||
/>
|
||||
<img
|
||||
src={iPhoneDark}
|
||||
alt=""
|
||||
style={{ maxHeight: '540px' }}
|
||||
className="d-light-none img-fluid"
|
||||
/>
|
||||
<div className="mt-5 mt-md-0">
|
||||
<div className="d-none d-md-block">
|
||||
<img
|
||||
src={spotIllustration41}
|
||||
alt=""
|
||||
width={200}
|
||||
className="d-dark-none"
|
||||
/>
|
||||
<img
|
||||
src={spotIllustrationDark41}
|
||||
alt=""
|
||||
width={200}
|
||||
className="d-light-none"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="fw-bolder mt-4">Get The App Now</h3>
|
||||
<p className="text-body-tertiary">
|
||||
Designed to provide the best user experience possible to all
|
||||
our customers with activities ranging from anything thinkable
|
||||
to the unthinkables.
|
||||
</p>
|
||||
<Link to="#!">
|
||||
<img src={playStore} alt="" height={32} className="me-2" />
|
||||
<img src={appStore} alt="" height={32} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default GetApp;
|
||||
91
src/pages/apps/travel-agency/landing/HeroHeader.tsx
Normal file
91
src/pages/apps/travel-agency/landing/HeroHeader.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import travelImg from 'assets/video/travel.png';
|
||||
import travelVideo from 'assets/video/travel.mp4';
|
||||
import { Dropdown, Form, InputGroup } from 'react-bootstrap';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faChevronDown,
|
||||
faLocationDot
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ReactTyped } from 'react-typed';
|
||||
|
||||
const HeroHeader = () => {
|
||||
return (
|
||||
<div className="booking-hero-header d-flex align-items-center">
|
||||
<div
|
||||
className="bg-holder overlay bg-opacity-50"
|
||||
style={{
|
||||
backgroundImage: `url(${travelImg})`,
|
||||
backgroundPosition: 'left bottom',
|
||||
backgroundSize: 'auto'
|
||||
}}
|
||||
>
|
||||
<video className="bg-video" autoPlay loop muted src={travelVideo} />
|
||||
</div>
|
||||
<div className="container-medium position-relative z-5">
|
||||
<h2 className="text-secondary-lighter fs-5 fs-md-3 fw-normal mb-3">
|
||||
Where is your
|
||||
</h2>
|
||||
<h1 className="fs-4 fs-md-1 text-white fw-normal mb-6 overflow-hidden">
|
||||
NEXT{' '}
|
||||
<ReactTyped
|
||||
strings={[
|
||||
'<span class=text-primary>TRIP!</span>',
|
||||
'<span class=text-warning>TOUR!</span>',
|
||||
'<span class=text-info>SOJOURN!</span>',
|
||||
'<span class=text-success>VACAY!</span>'
|
||||
]}
|
||||
typeSpeed={70}
|
||||
backSpeed={70}
|
||||
loop
|
||||
backDelay={1000}
|
||||
/>
|
||||
</h1>
|
||||
<InputGroup className="rounded-2 py-1 ps-2 w-lg-50 border border-light">
|
||||
<div className="form-icon-container flex-1 d-flex align-items-center">
|
||||
<FontAwesomeIcon
|
||||
icon={faLocationDot}
|
||||
className="form-icon text-danger-light"
|
||||
/>
|
||||
<Form.Control
|
||||
type="text"
|
||||
placeholder="Search Destination"
|
||||
className="form-icon-input bg-transparent border-0 outline-none fs-8 fs-md-7 text-secondary-light"
|
||||
/>
|
||||
</div>
|
||||
{/* dropdwon class not added */}
|
||||
<Dropdown align="end">
|
||||
<div className="d-flex align-items-center">
|
||||
<Dropdown.Toggle
|
||||
as="button"
|
||||
id="dropdown-basic"
|
||||
className="btn dropdown-caret-none py-0 bg-transparent text-secondary-light fs-8 fs-md-7 fw-semibold border-0 border-start border-light rounded-0"
|
||||
>
|
||||
Flight
|
||||
<FontAwesomeIcon
|
||||
className="ms-2"
|
||||
icon={faChevronDown}
|
||||
transform="down-1 shrink-4"
|
||||
/>
|
||||
</Dropdown.Toggle>
|
||||
|
||||
<Dropdown.Menu data-bs-theme="dark" className="dropdown-menu-end">
|
||||
<Dropdown.Item to="#!" as={Link}>
|
||||
Flight
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item to="#!" as={Link}>
|
||||
Trip
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item to="#!" as={Link}>
|
||||
Hotel
|
||||
</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</div>
|
||||
</Dropdown>
|
||||
</InputGroup>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroHeader;
|
||||
51
src/pages/apps/travel-agency/landing/Landing.tsx
Normal file
51
src/pages/apps/travel-agency/landing/Landing.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import useSettingsMountEffect from 'hooks/useSettingsMountEffect';
|
||||
import HeroHeader from './HeroHeader';
|
||||
import SeasonOfTour from './SeasonOfTour';
|
||||
import BestPlaces from './BestPlaces';
|
||||
import BestHotel from './BestHotel';
|
||||
import Gallery from './Gallery';
|
||||
import LatestPosts from './LatestPosts';
|
||||
import LatestPhotos from './LatestPhotos';
|
||||
import GetApp from './GetApp';
|
||||
import TravelCta from 'components/cta/TravelCta';
|
||||
|
||||
const Landing = () => {
|
||||
useSettingsMountEffect({
|
||||
disableNavigationType: true,
|
||||
disableHorizontalNavbarAppearance: true,
|
||||
disableVerticalNavbarAppearance: true,
|
||||
disableHorizontalNavbarShape: true
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
document.body.classList.add('bg-body-emphasis');
|
||||
document.body.setAttribute(
|
||||
'style',
|
||||
document.body.getAttribute('style')
|
||||
? document.body.getAttribute('style') +
|
||||
'; --phoenix-scroll-margin-top: 1.2rem'
|
||||
: '--phoenix-scroll-margin-top: 1.2rem'
|
||||
);
|
||||
return () => {
|
||||
document.body.classList.remove('bg-body-emphasis');
|
||||
document.body.removeAttribute('style');
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeroHeader />
|
||||
<SeasonOfTour />
|
||||
<BestPlaces />
|
||||
<BestHotel />
|
||||
<Gallery />
|
||||
<LatestPosts />
|
||||
<TravelCta />
|
||||
<LatestPhotos />
|
||||
<GetApp />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Landing;
|
||||
87
src/pages/apps/travel-agency/landing/LatestPhotos.tsx
Normal file
87
src/pages/apps/travel-agency/landing/LatestPhotos.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import { faLocationDot } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import gallery51 from 'assets/img/gallery/51.png';
|
||||
import gallery52 from 'assets/img/gallery/52.png';
|
||||
import gallery53 from 'assets/img/gallery/53.png';
|
||||
import gallery54 from 'assets/img/gallery/54.png';
|
||||
import gallery55 from 'assets/img/gallery/55.png';
|
||||
import gallery56 from 'assets/img/gallery/56.png';
|
||||
import { Col, Row } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
interface photos {
|
||||
img: string;
|
||||
location: string;
|
||||
}
|
||||
const photos: photos[] = [
|
||||
{
|
||||
img: gallery51,
|
||||
location: 'Bali Indonesia'
|
||||
},
|
||||
{
|
||||
img: gallery52,
|
||||
location: 'Barcelona'
|
||||
},
|
||||
{
|
||||
img: gallery53,
|
||||
location: 'Bali Indonesia'
|
||||
},
|
||||
{
|
||||
img: gallery54,
|
||||
location: 'Sydney'
|
||||
},
|
||||
{
|
||||
img: gallery55,
|
||||
location: 'Great Barrier Reef'
|
||||
},
|
||||
{
|
||||
img: gallery56,
|
||||
location: 'Grand Canyon'
|
||||
}
|
||||
];
|
||||
|
||||
const LatestPhotos = () => {
|
||||
return (
|
||||
<section className="pb-7 pt-0">
|
||||
<div className="container-medium">
|
||||
<div className="text-center mb-5">
|
||||
<h3 className="mb-2 text-body-emphasis">
|
||||
Latest photos from tourists
|
||||
</h3>
|
||||
<p className="mb-0 text-body-tertiary">
|
||||
See how our tourists enjoyed their trip from images captured by them
|
||||
with Team Phoenix!
|
||||
</p>
|
||||
</div>
|
||||
<Row className="g-3">
|
||||
{photos.map((item, index) => (
|
||||
<Col md={6} xl={4} key={index}>
|
||||
<div className="img-zoom-hover position-relative h-100 rounded-3 overflow-hidden">
|
||||
<Link to="#!">
|
||||
<img
|
||||
className="w-100 h-100 object-fit-cover"
|
||||
src={item.img}
|
||||
alt=""
|
||||
/>
|
||||
</Link>
|
||||
<div className="backdrop-faded">
|
||||
<Link
|
||||
to="#!"
|
||||
className="w-semibold mb-0 text-secondary-lighter stretched-link"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faLocationDot}
|
||||
className="text-secondary-lighter me-2"
|
||||
/>
|
||||
{item.location}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default LatestPhotos;
|
||||
184
src/pages/apps/travel-agency/landing/LatestPosts.tsx
Normal file
184
src/pages/apps/travel-agency/landing/LatestPosts.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
import FeatherIcon from 'feather-icons-react';
|
||||
import bgLeft31 from 'assets/img/bg/bg-left-31.png';
|
||||
import bgRight31 from 'assets/img/bg/bg-right-31.png';
|
||||
import gallery48 from 'assets/img/gallery/48.png';
|
||||
import gallery49 from 'assets/img/gallery/49.png';
|
||||
import gallery50 from 'assets/img/gallery/50.png';
|
||||
import gallery64 from 'assets/img/gallery/64.png';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import SwiperCore from 'swiper';
|
||||
import { Autoplay, Navigation } from 'swiper/modules';
|
||||
import Rating from 'components/base/Rating';
|
||||
import Button from 'components/base/Button';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faChevronLeft,
|
||||
faChevronRight
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
SwiperCore.use([Autoplay]);
|
||||
interface posts {
|
||||
title: string;
|
||||
date: string;
|
||||
rating: number;
|
||||
img: string;
|
||||
}
|
||||
const posts: posts[] = [
|
||||
{
|
||||
title: "Beautiful Frence, Let's Travelling!",
|
||||
date: 'Monday, Nov 07, 2022',
|
||||
rating: 4.8,
|
||||
img: gallery48
|
||||
},
|
||||
{
|
||||
title: 'Man Standing on Watching Mountain',
|
||||
date: 'Monday, Nov 06, 2022',
|
||||
rating: 4.5,
|
||||
img: gallery49
|
||||
},
|
||||
{
|
||||
title: "Beautiful Bali Indonesia, Let's Travelling!",
|
||||
date: 'Monday, Nov 05, 2022',
|
||||
rating: 4.2,
|
||||
img: gallery50
|
||||
},
|
||||
{
|
||||
title: 'Chasing sunsets, making memories worldwide.',
|
||||
date: 'Monday, Nov 04, 2022',
|
||||
rating: 4.5,
|
||||
img: gallery64
|
||||
}
|
||||
];
|
||||
const LatestPosts = () => {
|
||||
return (
|
||||
<section className="pb-7 pt-0 overflow-x-hidden">
|
||||
<div
|
||||
className="bg-holder d-none d-xl-block"
|
||||
style={{
|
||||
backgroundImage: `url(${bgLeft31})`,
|
||||
backgroundPosition: 'left',
|
||||
backgroundSize: '22%',
|
||||
zIndex: '1'
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="bg-holder d-none d-xl-block"
|
||||
style={{
|
||||
backgroundImage: `url(${bgRight31})`,
|
||||
backgroundPosition: 'right bottom',
|
||||
backgroundSize: '15%',
|
||||
zIndex: '1'
|
||||
}}
|
||||
/>
|
||||
<div className="bg-latest-posts" />
|
||||
<div className="container-medium text-center position-relative z-2">
|
||||
<h3 className="mb-2 text-body-emphasis">
|
||||
Our Latest Posts For Travellers
|
||||
</h3>
|
||||
<p className="mb-0 text-body-tertiary mb-13">
|
||||
Find the best travel memories from our past tours and get a clear idea
|
||||
of what we do.
|
||||
</p>
|
||||
</div>
|
||||
<div className="swiper-theme-container swiper-zooming-slider">
|
||||
<div className="swiper-container ">
|
||||
<Swiper
|
||||
loop
|
||||
centeredSlides
|
||||
autoplay
|
||||
centeredSlidesBounds
|
||||
spaceBetween={32}
|
||||
slidesPerView={1.3}
|
||||
speed={2000}
|
||||
navigation={{
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}}
|
||||
modules={[Navigation]}
|
||||
breakpoints={{
|
||||
540: {
|
||||
slidesPerView: 1.5
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 1.8
|
||||
},
|
||||
1200: {
|
||||
slidesPerView: 2
|
||||
},
|
||||
1530: {
|
||||
slidesPerView: 2.8
|
||||
}
|
||||
}}
|
||||
wrapperClass="swiper-wrapper"
|
||||
className="theme-slider swiper-container overflow-visible"
|
||||
>
|
||||
{posts.map((data, index) => (
|
||||
<SwiperSlide className="rounded-3 overflow-hidden" key={index}>
|
||||
<div className="position-relative w-100 h-100">
|
||||
<img
|
||||
src={data.img}
|
||||
className="w-100 h-100 object-fit-cover"
|
||||
alt=""
|
||||
/>
|
||||
<div className="backdrop-faded p-4 p-md-6">
|
||||
<div className="d-flex align-items-center mb-2">
|
||||
<FeatherIcon
|
||||
icon="calendar"
|
||||
className="text-secondary-lighter me-2"
|
||||
style={{ width: 16 }}
|
||||
/>
|
||||
<h6 className="mb-0 fw-semibold text-secondary-lighter pe-3 me-3 border-end">
|
||||
{data.date}
|
||||
</h6>
|
||||
<Rating
|
||||
iconClass="text-warning fs-9 me-2"
|
||||
initialValue={1}
|
||||
iconsCount={1}
|
||||
allowFraction={false}
|
||||
/>
|
||||
<h6 className="mb-0 text-secondary-lighter fw-semibold">
|
||||
{data.rating}
|
||||
</h6>
|
||||
</div>
|
||||
<Link to="#!" className="text-white fw-bold fs-7">
|
||||
{data.title}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
<div className="swiper-nav">
|
||||
<div className="swiper-button-next">
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronRight}
|
||||
className="text-primary"
|
||||
transform="shrink-3"
|
||||
/>
|
||||
</div>
|
||||
<div className="swiper-button-prev">
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronLeft}
|
||||
className="text-primary"
|
||||
transform="shrink-3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center mt-12 position-relative z-2">
|
||||
<Button variant="link" className="p-0 fs-8">
|
||||
View all
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronRight}
|
||||
className="ms-2"
|
||||
transform="shrink-2"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default LatestPosts;
|
||||
139
src/pages/apps/travel-agency/landing/SeasonOfTour.tsx
Normal file
139
src/pages/apps/travel-agency/landing/SeasonOfTour.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import React, { FC, HTMLAttributes } from 'react';
|
||||
import { Col, Row } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import bgLeft27 from 'assets/img/bg/bg-left-27.png';
|
||||
import bgRight27 from 'assets/img/bg/bg-right-27.png';
|
||||
import gallery35 from 'assets/img/gallery/35.png';
|
||||
import gallery36 from 'assets/img/gallery/36.png';
|
||||
import gallery37 from 'assets/img/gallery/37.png';
|
||||
import gallery38 from 'assets/img/gallery/38.png';
|
||||
import Button from 'components/base/Button';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
interface ImageZoomHoverCard extends HTMLAttributes<HTMLDivElement> {
|
||||
src: string;
|
||||
title: string;
|
||||
subTitle: string;
|
||||
imgClass?: string;
|
||||
}
|
||||
|
||||
const ImageZoomHoverCard: FC<ImageZoomHoverCard> = ({
|
||||
src,
|
||||
title,
|
||||
subTitle,
|
||||
imgClass = 'h-100',
|
||||
...rest
|
||||
}: ImageZoomHoverCard) => {
|
||||
return (
|
||||
<div className="img-zoom-hover position-relative h-100 rounded-3 overflow-hidden">
|
||||
<Link to="#!">
|
||||
<img
|
||||
className={`w-100 object-fit-cover ${imgClass}`}
|
||||
src={src}
|
||||
alt=""
|
||||
{...rest}
|
||||
/>
|
||||
</Link>
|
||||
<div className="backdrop-faded">
|
||||
<Link to="#!" className="fw-bold fs-7 text-white streched-link">
|
||||
{title}
|
||||
</Link>
|
||||
<p className="mb-0 text-white fs-9">{subTitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SeasonOfTour = () => {
|
||||
return (
|
||||
<section className="pt-6 pt-md-10 pb-10">
|
||||
<div className="container-medium">
|
||||
<div
|
||||
className="bg-holder d-none d-xl-block bg-left"
|
||||
style={{
|
||||
backgroundImage: `url(${bgLeft27})`,
|
||||
backgroundSize: 'auto'
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="bg-holder d-none d-xl-block bg-right"
|
||||
style={{
|
||||
backgroundImage: `url(${bgRight27})`,
|
||||
backgroundSize: 'auto'
|
||||
}}
|
||||
/>
|
||||
<Row className="g-3 position-relative">
|
||||
<Col lg={6}>
|
||||
<Row className="g-3">
|
||||
<Col md={7}>
|
||||
<h4 className="fw-semibold mb-3">Season of </h4>
|
||||
<h2 className="fs-4 fw-semibold mb-3 mb-md-4">
|
||||
Tour &{' '}
|
||||
<span className="text-primary-light fw-bold">Travel</span>
|
||||
</h2>
|
||||
<p className="mb-3 mb-md-0 text-body-tertiary">
|
||||
This is the perfect season for tours and travels. At Phoenix,
|
||||
you can easily select the best travel option for your next
|
||||
vacation
|
||||
<span className="d-none d-lg-inline-block d-xl-none">
|
||||
...
|
||||
</span>
|
||||
<span className="d-lg-none d-xl-inline">
|
||||
This will help you with the pricing that you’ll need, the
|
||||
accommodation facilities, food and beverages, and water
|
||||
rides.
|
||||
</span>
|
||||
</p>
|
||||
</Col>
|
||||
|
||||
<Col xs={6} md={5}>
|
||||
<ImageZoomHoverCard
|
||||
src={gallery35}
|
||||
title="New Zealand"
|
||||
subTitle="17 Hotels"
|
||||
/>
|
||||
</Col>
|
||||
<Col xs={6} md={5}>
|
||||
<ImageZoomHoverCard
|
||||
src={gallery36}
|
||||
title="London"
|
||||
subTitle="17 Hotels"
|
||||
/>
|
||||
</Col>
|
||||
<Col md={7}>
|
||||
<ImageZoomHoverCard
|
||||
src={gallery37}
|
||||
title="Maui"
|
||||
subTitle="14 Hotels"
|
||||
imgClass="h-md-100"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col lg={6}>
|
||||
<div className="d-flex flex-column gap-3 h-100">
|
||||
<ImageZoomHoverCard
|
||||
src={gallery38}
|
||||
title="Bali, Indonesia"
|
||||
subTitle="51 Hotels"
|
||||
imgClass="h-lg-100"
|
||||
style={{ height: 220 }}
|
||||
/>
|
||||
<Button variant="primary" className="w-100 py-3 fs-8">
|
||||
Explore more
|
||||
<FontAwesomeIcon
|
||||
className="ms-2"
|
||||
icon={faChevronRight}
|
||||
transform="down-2"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default SeasonOfTour;
|
||||
100
src/pages/apps/travel-agency/landing/TopNav copy.tsx
Normal file
100
src/pages/apps/travel-agency/landing/TopNav copy.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import { faWhatsapp } from '@fortawesome/free-brands-svg-icons';
|
||||
import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
|
||||
import {
|
||||
IconDefinition,
|
||||
faArrowRightToBracket,
|
||||
faEllipsisH
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import Button from 'components/base/Button';
|
||||
import React from 'react';
|
||||
import { Dropdown } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const TopNav = () => {
|
||||
interface navItems {
|
||||
title: string;
|
||||
link: string;
|
||||
icon?: IconDefinition;
|
||||
transform?: string;
|
||||
}
|
||||
const navItems: navItems[] = [
|
||||
{
|
||||
title: 'Become a Host',
|
||||
link: '#!'
|
||||
},
|
||||
{
|
||||
title: 'Blog',
|
||||
link: '#!'
|
||||
},
|
||||
{
|
||||
title: 'Career',
|
||||
link: '#!'
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Support',
|
||||
link: 'mailto:example@gmail.com',
|
||||
icon: faEnvelope,
|
||||
transform: 'down-1'
|
||||
},
|
||||
{
|
||||
title: '+01 123 581321',
|
||||
link: 'tel:+01123581321',
|
||||
icon: faWhatsapp
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-primary-subtle py-2">
|
||||
<div className="container-medium d-flex align-items-center justify-content-between">
|
||||
<Button href="#!" variant="link" className="text-body p-0">
|
||||
<FontAwesomeIcon
|
||||
icon={faArrowRightToBracket}
|
||||
className="me-2"
|
||||
transform="down-1"
|
||||
/>
|
||||
Agent Login
|
||||
</Button>
|
||||
<Dropdown>
|
||||
{/* <Button size="sm" className="p-0 d-md-none fs-8"></Button> */}
|
||||
<Dropdown.Toggle
|
||||
size="sm"
|
||||
variant=""
|
||||
className="p-0 d-md-none fs-8 dropdown-caret-none"
|
||||
>
|
||||
<FontAwesomeIcon icon={faEllipsisH} />
|
||||
</Dropdown.Toggle>
|
||||
<Dropdown.Menu style={{ zIndex: 9999 }}>
|
||||
<Dropdown.Item href="">Become a Host</Dropdown.Item>
|
||||
<Dropdown.Item href="">Blog</Dropdown.Item>
|
||||
<Dropdown.Item href="">Career</Dropdown.Item>
|
||||
<Dropdown.Item href="">Support</Dropdown.Item>
|
||||
<Dropdown.Item href="">+01 123 581321</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
<ul className="d-none d-md-flex gap-5 list-unstyled mb-0">
|
||||
{navItems.map((item, index) => (
|
||||
<li key={index}>
|
||||
<Link
|
||||
to={item.link}
|
||||
className="lh-1 text-body-tertiary fw-semibold fs-9"
|
||||
>
|
||||
{item.icon && (
|
||||
<FontAwesomeIcon
|
||||
icon={item.icon}
|
||||
transform={item.transform || undefined}
|
||||
className="me-2"
|
||||
/>
|
||||
)}
|
||||
{item.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TopNav;
|
||||
84
src/pages/apps/travel-agency/landing/TopNav.tsx
Normal file
84
src/pages/apps/travel-agency/landing/TopNav.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import {
|
||||
faArrowRightToBracket,
|
||||
faEllipsisH,
|
||||
IconDefinition
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import Button from 'components/base/Button';
|
||||
import { Dropdown } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const TopNav = () => {
|
||||
interface navItems {
|
||||
title: string;
|
||||
link: string;
|
||||
icon?: IconDefinition;
|
||||
transform?: string;
|
||||
}
|
||||
const navItems: navItems[] = [
|
||||
{
|
||||
title: 'Homepage',
|
||||
link: '#!'
|
||||
},
|
||||
{
|
||||
title: 'Booking',
|
||||
link: '#!'
|
||||
},
|
||||
{
|
||||
title: 'Payment',
|
||||
link: '#!'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-primary-subtle py-2">
|
||||
<div className="container-medium d-flex align-items-center justify-content-between">
|
||||
<Button href="#!" variant="link" className="text-body p-0">
|
||||
<FontAwesomeIcon
|
||||
icon={faArrowRightToBracket}
|
||||
className="me-2"
|
||||
transform="down-1"
|
||||
/>
|
||||
Agent Login
|
||||
</Button>
|
||||
<Dropdown>
|
||||
<Dropdown.Toggle
|
||||
size="sm"
|
||||
variant=""
|
||||
className="p-0 d-md-none fs-8 dropdown-caret-none"
|
||||
>
|
||||
<FontAwesomeIcon icon={faEllipsisH} />
|
||||
</Dropdown.Toggle>
|
||||
<Dropdown.Menu style={{ zIndex: 9999 }}>
|
||||
<Dropdown.Item href="">Become a Host</Dropdown.Item>
|
||||
<Dropdown.Item href="">Blog</Dropdown.Item>
|
||||
<Dropdown.Item href="">Career</Dropdown.Item>
|
||||
<Dropdown.Item href="">Support</Dropdown.Item>
|
||||
<Dropdown.Item href="">+01 123 581321</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
<ul className="d-none d-md-flex gap-5 list-unstyled mb-0">
|
||||
{navItems.map((item, index) => (
|
||||
<li key={index}>
|
||||
<Link
|
||||
to={item.link}
|
||||
className="lh-1 text-body-tertiary fw-semibold fs-9"
|
||||
>
|
||||
{item.icon && (
|
||||
<FontAwesomeIcon
|
||||
icon={item.icon}
|
||||
transform={item.transform || undefined}
|
||||
className="me-2"
|
||||
/>
|
||||
)}
|
||||
{item.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TopNav;
|
||||
91
src/pages/apps/travel-agency/landing/TravelAgencyFooter.tsx
Normal file
91
src/pages/apps/travel-agency/landing/TravelAgencyFooter.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import React from 'react';
|
||||
import { Navbar, Container, Row, Col } from 'react-bootstrap';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { IconDefinition } from '@fortawesome/free-brands-svg-icons';
|
||||
import { faWhatsapp } from '@fortawesome/free-brands-svg-icons';
|
||||
import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Logo from 'components/common/Logo';
|
||||
import classNames from 'classnames';
|
||||
import Footer from 'components/footers/Footer';
|
||||
|
||||
interface TravelAgencyFooterProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface navItems {
|
||||
title: string;
|
||||
link: string;
|
||||
icon?: IconDefinition;
|
||||
transform?: string;
|
||||
}
|
||||
|
||||
const navItems: navItems[] = [
|
||||
{
|
||||
title: 'Become a Host',
|
||||
link: '#!'
|
||||
},
|
||||
{
|
||||
title: 'Blog',
|
||||
link: '#!'
|
||||
},
|
||||
{
|
||||
title: 'Career',
|
||||
link: '#!'
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Support',
|
||||
link: 'mailto:example@gmail.com',
|
||||
icon: faEnvelope,
|
||||
transform: 'down-1'
|
||||
},
|
||||
{
|
||||
title: '+01 123 581321',
|
||||
link: 'tel:+01123581321',
|
||||
icon: faWhatsapp
|
||||
}
|
||||
];
|
||||
|
||||
const TravelAgencyFooter = ({ className }: TravelAgencyFooterProps) => {
|
||||
return (
|
||||
<Container fluid="medium">
|
||||
<Row
|
||||
className={classNames(
|
||||
'flex-center justify-content-md-between align-items-md-center mb-3 gy-2',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<Col xs="auto">
|
||||
<Navbar.Brand as={Link} to={'/'} className="flex-1 flex-grow-0">
|
||||
<Logo />
|
||||
</Navbar.Brand>
|
||||
</Col>
|
||||
<Col xs="auto">
|
||||
<ul className="d-flex flex-center flex-wrap gap-x-5 gap-y-1 list-unstyled mb-0">
|
||||
{navItems.map((item, index) => (
|
||||
<li key={index}>
|
||||
<Link
|
||||
to={item.link}
|
||||
className="lh-1 text-body-tertiary fw-semibold fs-9"
|
||||
>
|
||||
{item.icon && (
|
||||
<FontAwesomeIcon
|
||||
icon={item.icon}
|
||||
transform={item.transform || undefined}
|
||||
className="me-2"
|
||||
/>
|
||||
)}
|
||||
{item.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Col>
|
||||
</Row>
|
||||
<Footer className="px-0" />
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default TravelAgencyFooter;
|
||||
20
src/pages/apps/travel-agency/payment/CountdownDisplay.tsx
Normal file
20
src/pages/apps/travel-agency/payment/CountdownDisplay.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import { faClock } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import React from 'react';
|
||||
|
||||
const CountdownDisplay = () => {
|
||||
return (
|
||||
<div>
|
||||
<p className="mb-2 text-info">Book before time runs out</p>
|
||||
<h3 className="mb-0 text-info fw-bold d-flex gap-2 align-items-center justify-content-sm-end">
|
||||
<FontAwesomeIcon icon={faClock} className="fs-8" />
|
||||
<span>29</span>
|
||||
<span className="fs-9 fw-normal">min</span>
|
||||
<span>50</span>
|
||||
<span className="fs-9 fw-normal">sec</span>
|
||||
</h3>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CountdownDisplay;
|
||||
82
src/pages/apps/travel-agency/payment/FlightBookingWizard.tsx
Normal file
82
src/pages/apps/travel-agency/payment/FlightBookingWizard.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import { IconProp } from '@fortawesome/fontawesome-svg-core';
|
||||
import {
|
||||
faCheck,
|
||||
faMoneyBill,
|
||||
faPlane,
|
||||
faUser
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { Nav } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
interface WizardItem {
|
||||
name: string;
|
||||
icon: IconProp;
|
||||
url: string;
|
||||
}
|
||||
|
||||
interface FlightBookingWizardProps {
|
||||
activeItem: string;
|
||||
}
|
||||
|
||||
const wizardItems: WizardItem[] = [
|
||||
{
|
||||
name: 'Flight',
|
||||
icon: faPlane,
|
||||
url: '/apps/travel-agency/flight/homepage'
|
||||
},
|
||||
{
|
||||
name: 'Booking',
|
||||
icon: faUser,
|
||||
url: '/apps/travel-agency/flight/booking'
|
||||
},
|
||||
{
|
||||
name: 'Payment',
|
||||
icon: faMoneyBill,
|
||||
url: '/apps/travel-agency/flight/payment'
|
||||
}
|
||||
];
|
||||
|
||||
const FlightBookingWizard = ({ activeItem }: FlightBookingWizardProps) => {
|
||||
const doneItems = wizardItems.filter(
|
||||
item =>
|
||||
wizardItems.indexOf(item) <
|
||||
wizardItems.findIndex(i => i.name === activeItem)
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="theme-wizard flight-booking-wizard"
|
||||
style={{ width: '18.125rem' }}
|
||||
>
|
||||
<Nav className="justify-content-between nav-wizard nav-wizard-success">
|
||||
{wizardItems.map((item, index) => {
|
||||
const isDone = doneItems.some(i => i.name === item.name);
|
||||
const isActive = activeItem === item.name;
|
||||
const stepClass = isDone ? 'done complete' : isActive ? 'active' : '';
|
||||
|
||||
return (
|
||||
<Nav.Item key={index}>
|
||||
<Nav.Link
|
||||
as={Link}
|
||||
to={item.url}
|
||||
className={`fw-semibold ${stepClass}`}
|
||||
>
|
||||
<div className="d-inline-block text-center">
|
||||
<span className="nav-item-circle-parent">
|
||||
<span className="d-block nav-item-circle">
|
||||
<FontAwesomeIcon icon={isDone ? faCheck : item.icon} />
|
||||
</span>
|
||||
</span>
|
||||
<span className="d-md-block mt-1 fs-9">{item.name}</span>
|
||||
</div>
|
||||
</Nav.Link>
|
||||
</Nav.Item>
|
||||
);
|
||||
})}
|
||||
</Nav>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FlightBookingWizard;
|
||||
47
src/pages/apps/travel-agency/trip/Checkout.tsx
Normal file
47
src/pages/apps/travel-agency/trip/Checkout.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import TripSummaryCard from 'components/cards/TripSummaryCard';
|
||||
import PageBreadcrumb from 'components/common/PageBreadcrumb';
|
||||
import ResizableNavbar from 'components/navbars/travel-agency/ResizableNavbar';
|
||||
import { defaultBreadcrumbItems } from 'data/commonData';
|
||||
import { tripNavItems } from 'data/travel-agency/resizableNav';
|
||||
import { Col, Container, Form, Row } from 'react-bootstrap';
|
||||
import { selectedTrip } from 'data/travel-agency/customer/trip';
|
||||
import Button from 'components/base/Button';
|
||||
import TripCheckoutForm from 'components/forms/TripCheckoutForm';
|
||||
|
||||
const TripCheckout = () => {
|
||||
return (
|
||||
<>
|
||||
<ResizableNavbar navItems={tripNavItems} />
|
||||
<section className="py-5 pb-md-7 pb-lg-9">
|
||||
<Container fluid="medium">
|
||||
<Form onSubmit={e => e.preventDefault()}>
|
||||
<Row className="gy-5 gx-lg-0 justify-content-between">
|
||||
<Col lg={6}>
|
||||
<PageBreadcrumb
|
||||
items={defaultBreadcrumbItems}
|
||||
className="mb-3"
|
||||
/>
|
||||
<h2 className="mb-5">Check out</h2>
|
||||
<TripCheckoutForm />
|
||||
</Col>
|
||||
<Col lg={5} xl={4}>
|
||||
<div className="sticky-lg-top z-0" style={{ top: '10rem' }}>
|
||||
<TripSummaryCard selectedTrip={selectedTrip} />
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
className="w-100 mt-3"
|
||||
>
|
||||
Book now
|
||||
</Button>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Container>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TripCheckout;
|
||||
29
src/pages/apps/travel-agency/trip/Homepage.tsx
Normal file
29
src/pages/apps/travel-agency/trip/Homepage.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import useSettingsMountEffect from 'hooks/useSettingsMountEffect';
|
||||
import NavbarHome from 'components/navbars/travel-agency/NavbarHome';
|
||||
import ResizableNavbar from 'components/navbars/travel-agency/ResizableNavbar';
|
||||
import { tripNavItems } from 'data/travel-agency/resizableNav';
|
||||
import TripHomepageHeroBanner from 'components/modules/travel-agency/trip/homepage/TripHomepageHeroBanner';
|
||||
import TripHomepageTripList from 'components/modules/travel-agency/trip/homepage/TripHomepageTripList';
|
||||
import { tripHomepageItems } from 'data/travel-agency/customer/trip';
|
||||
|
||||
const TripHomepage = () => {
|
||||
useSettingsMountEffect({
|
||||
disableNavigationType: true,
|
||||
disableHorizontalNavbarAppearance: true,
|
||||
disableVerticalNavbarAppearance: true,
|
||||
disableHorizontalNavbarShape: true
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<ResizableNavbar navItems={tripNavItems} />
|
||||
<section className="container-small py-0">
|
||||
<NavbarHome currentPage="Trip" />
|
||||
</section>
|
||||
<TripHomepageHeroBanner />
|
||||
<TripHomepageTripList tripItems={tripHomepageItems} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TripHomepage;
|
||||
60
src/pages/apps/travel-agency/trip/TripDetails.tsx
Normal file
60
src/pages/apps/travel-agency/trip/TripDetails.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import React from 'react';
|
||||
import useSettingsMountEffect from 'hooks/useSettingsMountEffect';
|
||||
import ResizableNavbar from 'components/navbars/travel-agency/ResizableNavbar';
|
||||
import { tripNavItems } from 'data/travel-agency/resizableNav';
|
||||
import PageBreadcrumb from 'components/common/PageBreadcrumb';
|
||||
import { defaultBreadcrumbItems } from 'data/commonData';
|
||||
import { Container, Row } from 'react-bootstrap';
|
||||
import TripDetailsOverview from 'components/modules/travel-agency/trip/trip-details/TripDetailsOverview';
|
||||
import TripDetailsGallery from 'components/modules/travel-agency/trip/trip-details/TripDetailsGallery';
|
||||
import {
|
||||
tripDetailsAlbum,
|
||||
tripHomepageItems,
|
||||
tripOverview
|
||||
} from 'data/travel-agency/customer/trip';
|
||||
import TripDetailsTab from 'components/modules/travel-agency/trip/trip-details/TripDetailsTab';
|
||||
import TripShowcaseItem from 'components/modules/travel-agency/trip/TripShowcaseItem';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const TripDetails = () => {
|
||||
useSettingsMountEffect({
|
||||
disableNavigationType: true,
|
||||
disableHorizontalNavbarAppearance: true,
|
||||
disableVerticalNavbarAppearance: true,
|
||||
disableHorizontalNavbarShape: true
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<ResizableNavbar navItems={tripNavItems} />
|
||||
<section className="pt-5 pb-5 pb-md-6 pb-lg-9">
|
||||
<Container fluid="medium">
|
||||
<PageBreadcrumb items={defaultBreadcrumbItems} className="mb-3" />
|
||||
<h2 className="mb-5">Trip Details</h2>
|
||||
<h1 className="fw-bold">
|
||||
Walk where the king walked once in Wakanda{' '}
|
||||
<span className="align-middle text-nowrap fs-8">
|
||||
<span className="text-body-quaternary">by </span>
|
||||
<Link to="#!" className="text-body-tertiary">
|
||||
Panther Travels Limited
|
||||
</Link>
|
||||
</span>
|
||||
</h1>
|
||||
<hr className="bg-secondary-lighter" />
|
||||
<TripDetailsOverview tripOverview={tripOverview} />
|
||||
<TripDetailsGallery galleryItems={tripDetailsAlbum} />
|
||||
<TripDetailsTab />
|
||||
<h2 className="mt-5 mb-3">Similar tours</h2>
|
||||
<Row className="g-3">
|
||||
{tripHomepageItems
|
||||
.slice(tripHomepageItems.length - 3)
|
||||
.map(tripItem => (
|
||||
<TripShowcaseItem showcaseItem={tripItem} key={tripItem.id} />
|
||||
))}
|
||||
</Row>
|
||||
</Container>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TripDetails;
|
||||
Reference in New Issue
Block a user