├── my-app ├── src │ ├── App.css │ ├── Logo │ │ ├── rb.jpg │ │ ├── pro.webp │ │ └── ProjectLogo.webp │ ├── Reducer │ │ ├── actionType.js │ │ ├── store.js │ │ ├── action.js │ │ └── reducer.js │ ├── Pankaj │ │ ├── Plan │ │ │ ├── Plan.module.css │ │ │ └── Plan.jsx │ │ ├── Redux │ │ │ ├── ActionType.js │ │ │ ├── Store.js │ │ │ ├── Action.js │ │ │ └── Reducer.js │ │ ├── Creator │ │ │ ├── Creator.module.css │ │ │ ├── Readmore.jsx │ │ │ └── Creator.jsx │ │ ├── Insportlight │ │ │ ├── Inspotlight.module.css │ │ │ └── Inspotlight.jsx │ │ ├── Find │ │ │ ├── Find.module.css │ │ │ └── Find.jsx │ │ ├── Place │ │ │ ├── Place.module.css │ │ │ └── Place.jsx │ │ ├── Check │ │ │ ├── Check.module.css │ │ │ └── Check.jsx │ │ ├── Watch │ │ │ ├── Watch.module.css │ │ │ └── Watch.jsx │ │ ├── Book │ │ │ ├── Book.module.css │ │ │ └── Book.jsx │ │ ├── Travel │ │ │ └── Travel.module.css │ │ ├── Home.module.css │ │ └── Home.jsx │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── Context │ │ ├── Context.jsx │ │ └── ShowContext.jsx │ ├── Components │ │ ├── PrivateRoute.jsx │ │ ├── Login.jsx │ │ └── Signup.jsx │ ├── firebase-config.js │ ├── Home_Page_Component │ │ ├── Main_Page.jsx │ │ ├── Slider.jsx │ │ ├── home_page_img.module.css │ │ ├── Small_Img_Box.jsx │ │ ├── home_page_img.jsx │ │ ├── ImageSlider.jsx │ │ ├── Exclusive_box.jsx │ │ └── Find_best_place.jsx │ ├── Navbar │ │ ├── Navbar.module.css │ │ ├── HamburgerMenu.jsx │ │ ├── Home.jsx │ │ ├── Homepage.css │ │ └── Navbar.jsx │ ├── index.js │ ├── Routes │ │ └── AllRoutes.jsx │ ├── AdminPanal │ │ ├── admin.jsx │ │ ├── Adminnav.jsx │ │ ├── Delete.jsx │ │ ├── adminLogin.jsx │ │ ├── orders.jsx │ │ └── addProduct.jsx │ ├── App.js │ ├── Packages │ │ ├── singlepage.jsx │ │ ├── itemview.jsx │ │ ├── confirmButton.jsx │ │ ├── checkout.jsx │ │ └── product.jsx │ ├── Footer │ │ ├── Footer.module.css │ │ └── Footer.jsx │ ├── logo.svg │ └── beaches │ │ ├── Comprehensive.jsx │ │ ├── Topbeach.jsx │ │ ├── Package.jsx │ │ └── Beach.jsx ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── .gitignore ├── package.json └── README.md └── README.md /my-app/src/App.css: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /my-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /my-app/src/Logo/rb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nasirimam/R.P.S.N-Vacation/HEAD/my-app/src/Logo/rb.jpg -------------------------------------------------------------------------------- /my-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nasirimam/R.P.S.N-Vacation/HEAD/my-app/public/favicon.ico -------------------------------------------------------------------------------- /my-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nasirimam/R.P.S.N-Vacation/HEAD/my-app/public/logo192.png -------------------------------------------------------------------------------- /my-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nasirimam/R.P.S.N-Vacation/HEAD/my-app/public/logo512.png -------------------------------------------------------------------------------- /my-app/src/Logo/pro.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nasirimam/R.P.S.N-Vacation/HEAD/my-app/src/Logo/pro.webp -------------------------------------------------------------------------------- /my-app/src/Logo/ProjectLogo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nasirimam/R.P.S.N-Vacation/HEAD/my-app/src/Logo/ProjectLogo.webp -------------------------------------------------------------------------------- /my-app/src/Reducer/actionType.js: -------------------------------------------------------------------------------- 1 | export const GET_PRODUCT_REQUEST = "GET_PRODUCT_REQUEST"; 2 | export const GET_PRODUCT_SUCCESS = "GET_PRODUCT_SUCCESS"; 3 | export const GET_PRODUCT_FAILED = "GET_PRODUCT_FAILED"; 4 | -------------------------------------------------------------------------------- /my-app/src/Reducer/store.js: -------------------------------------------------------------------------------- 1 | import { legacy_createStore } from "redux"; 2 | import { reducer as nasirReducer } from "./reducer"; 3 | 4 | const store = legacy_createStore(nasirReducer); 5 | 6 | export { store }; 7 | -------------------------------------------------------------------------------- /my-app/src/Pankaj/Plan/Plan.module.css: -------------------------------------------------------------------------------- 1 | .maindiv{ 2 | 3 | padding: 0 0.1rem 0 0.1rem; 4 | 5 | } 6 | 7 | .box{ 8 | 9 | margin-left: 10px; 10 | 11 | 12 | } 13 | img{ 14 | height: 24rem; 15 | width: 17rem; 16 | border-radius: 10px; 17 | } -------------------------------------------------------------------------------- /my-app/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /my-app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /my-app/src/Pankaj/Redux/ActionType.js: -------------------------------------------------------------------------------- 1 | export const REGISTER_LOADING="REGISTER_LOADING" 2 | export const REGISTER_SUCCESS="REGISTER_SUCCESS" 3 | export const REGISTER_FAILURE="REGISTER_FAILURE" 4 | 5 | export const LOGIN_LOADING="LOGIN_LOADING" 6 | export const LOGIN_SUCCESS="LOGIN_SUCCESS" 7 | export const LOGIN_FAILURE="LOGIN_FAILURE" 8 | 9 | export const LOGOUT_SUCCESS="LOGOUT_SUCCESS" 10 | 11 | -------------------------------------------------------------------------------- /my-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /my-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /my-app/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /my-app/src/Context/Context.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useState } from 'react' 3 | import { createContext } from 'react' 4 | 5 | export const ShowContext = createContext() 6 | function ShowContextProvider({ children }) { 7 | 8 | const [show, setShow] = useState(false) 9 | 10 | return ( 11 | 12 | 13 | {children} 14 | 15 | ) 16 | } 17 | 18 | export default ShowContextProvider -------------------------------------------------------------------------------- /my-app/src/Pankaj/Creator/Creator.module.css: -------------------------------------------------------------------------------- 1 | .show{ 2 | text-align: left; 3 | color: #333333; 4 | height: 5rem; 5 | 6 | } 7 | .btn{ 8 | color: #359391; 9 | border: none; 10 | background-color: #fff; 11 | margin-left: 33rem; 12 | cursor: pointer; 13 | } 14 | 15 | .creimg{ 16 | display: flex; 17 | gap:1.3rem; 18 | justify-content: center; 19 | margin-top: 1.5rem; 20 | 21 | } 22 | img{ 23 | height: 450px; 24 | width: 350px; 25 | } -------------------------------------------------------------------------------- /my-app/src/Reducer/action.js: -------------------------------------------------------------------------------- 1 | import * as types from "./actionType"; 2 | 3 | const getProductRequest = () => { 4 | return { 5 | type: types.GET_PRODUCT_REQUEST, 6 | }; 7 | }; 8 | 9 | const getProductSuccess = (payload) => { 10 | return { 11 | type: types.GET_PRODUCT_SUCCESS, 12 | payload, 13 | }; 14 | }; 15 | 16 | const getProductFailed = () => { 17 | return { 18 | type: types.GET_PRODUCT_FAILED, 19 | }; 20 | }; 21 | 22 | export { getProductFailed, getProductRequest, getProductSuccess }; 23 | -------------------------------------------------------------------------------- /my-app/src/Components/PrivateRoute.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Navigate } from "react-router-dom"; 3 | import { useContext, children } from "react"; 4 | import { ShowContext } from "../Context/ShowContext"; 5 | import { useLocation } from "react-router-dom"; 6 | 7 | const PrivateRoute = ({ children }) => { 8 | const { isAuth } = useContext(ShowContext); 9 | const location = useLocation(); 10 | 11 | if (!isAuth) { 12 | return ; 13 | } 14 | return children; 15 | }; 16 | 17 | export default PrivateRoute; 18 | -------------------------------------------------------------------------------- /my-app/src/firebase-config.js: -------------------------------------------------------------------------------- 1 | import { initializeApp } from "firebase/app"; 2 | import {getAuth} from "firebase/auth" 3 | 4 | 5 | 6 | const firebaseConfig = { 7 | apiKey: "AIzaSyBpsmRuCDJbp1qUA0AWJMNUIsKkJFeB2nA", 8 | authDomain: "tripoto-clone-authentication.firebaseapp.com", 9 | projectId: "tripoto-clone-authentication", 10 | storageBucket: "tripoto-clone-authentication.appspot.com", 11 | messagingSenderId: "206673037211", 12 | appId: "1:206673037211:web:da494b1f5ab925b6b9033e" 13 | }; 14 | 15 | const app = initializeApp(firebaseConfig); 16 | 17 | export const auth=getAuth(app) -------------------------------------------------------------------------------- /my-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /my-app/src/Home_Page_Component/Main_Page.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // import HomePage_img from "./home_page_img"; 3 | import Small_Img_Box from "./Small_Img_Box"; 4 | import "../App.css" 5 | import Slider from "./Slider"; 6 | import Find_best_place from "./Find_best_place"; 7 | import Exclusive_box from "./Exclusive_box"; 8 | 9 | 10 | 11 | function HomePage_Component(){ 12 | 13 | return( 14 |
15 | {/* */} 16 | 17 | 18 | 19 | 20 |
21 | ) 22 | } 23 | export default HomePage_Component -------------------------------------------------------------------------------- /my-app/src/Pankaj/Creator/Readmore.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import styles from "./Creator.module.css" 3 | 4 | export const Readmore = ({children}) => { 5 | const [show, setShow] = useState(false); 6 | const toggle = () => { 7 | setShow(show => !show) 8 | } 9 | return ( 10 |
11 |
12 | {show ? children : children.substr(0,320)} 13 |
14 |
15 | {!show ? : "" } 18 | 19 |
20 |
21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /my-app/src/Reducer/reducer.js: -------------------------------------------------------------------------------- 1 | import * as types from "./actionType"; 2 | 3 | const intitalState = { 4 | products: [], 5 | isLoding: false, 6 | isError: false, 7 | }; 8 | 9 | const reducer = (oldState = intitalState, action) => { 10 | const { type, payload } = action; 11 | 12 | switch (type) { 13 | case types.GET_PRODUCT_REQUEST: 14 | return { ...oldState, isLoding: true }; 15 | case types.GET_PRODUCT_SUCCESS: 16 | return { ...oldState, isLoding: false, products: payload }; 17 | case types.GET_PRODUCT_FAILED: 18 | return { ...oldState, isLoding: false, isError: true }; 19 | default: 20 | return oldState; 21 | } 22 | }; 23 | 24 | export { reducer }; 25 | -------------------------------------------------------------------------------- /my-app/src/Navbar/Navbar.module.css: -------------------------------------------------------------------------------- 1 | #navbar { 2 | display: flex; 3 | color: white; 4 | justify-content: space-between; 5 | padding-left: 20px; 6 | padding-right: 10px; 7 | padding-top: 5px; 8 | padding-bottom: 5px; 9 | align-items: center; 10 | width: 100%; 11 | position: fixed; 12 | font-size: 20px; 13 | z-index: 99; 14 | } 15 | 16 | #navbar>div { 17 | display: flex; 18 | justify-content: center; 19 | gap: 30px; 20 | } 21 | 22 | .navSearch { 23 | margin-left: -100px; 24 | border-radius: 2px; 25 | font-size: 20px; 26 | } 27 | /* #navbar:hover{ 28 | background-color: rgb(255, 255, 0); 29 | color: rgb(206, 11, 11); 30 | } */ 31 | @media (max-width) { 32 | .navSearch { 33 | display: none; 34 | } 35 | } -------------------------------------------------------------------------------- /my-app/src/Pankaj/Redux/Store.js: -------------------------------------------------------------------------------- 1 | import { 2 | legacy_createStore, 3 | applyMiddleware, 4 | compose, 5 | combineReducers, 6 | } from "redux"; 7 | import thunk from "redux-thunk"; 8 | import { reducer } from "./Reducer"; 9 | import { reducer as nasirReducer } from "../../Reducer/reducer"; 10 | 11 | const rootReducer = combineReducers({ reducer, nasirReducer }); 12 | 13 | const composeEnhancers = 14 | typeof window === "object" && window._REDUX_DEVTOOLS_EXTENSION_COMPOSE_ 15 | ? window._REDUX_DEVTOOLS_EXTENSION_COMPOSE_({ 16 | // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize... 17 | }) 18 | : compose; 19 | 20 | export const store = legacy_createStore( 21 | rootReducer, 22 | composeEnhancers(applyMiddleware(thunk)) 23 | ); 24 | -------------------------------------------------------------------------------- /my-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | 7 | import { ChakraProvider } from "@chakra-ui/react"; 8 | import { BrowserRouter } from "react-router-dom"; 9 | import ShowContextProvider from "./Context/ShowContext"; 10 | import { Provider } from "react-redux"; 11 | import { store } from "./Pankaj/Redux/Store"; 12 | const root = ReactDOM.createRoot(document.getElementById("root")); 13 | root.render( 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | ); 24 | 25 | reportWebVitals(); 26 | -------------------------------------------------------------------------------- /my-app/src/Pankaj/Creator/Creator.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Readmore } from "./Readmore"; 3 | import styles from "./Creator.module.css"; 4 | 5 | export const Creator = () => { 6 | return ( 7 |
8 |
9 |
10 | 11 | Tripoto Family is a community of travel content creators who create 12 | stunning photo blogs, engaging reels and videos as well as 13 | informative articles. Here are the most promising creators of the 14 | month who took us on a beautiful journey across India and the world 15 | through their content. Kudos to Tripoto's best creators for July 16 | 2022! 17 | 18 |
19 |
20 |
21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /my-app/src/Home_Page_Component/Slider.jsx: -------------------------------------------------------------------------------- 1 | import ImageSlider from "./ImageSlider"; 2 | const Slider = () => { 3 | const slides = [ 4 | { url: "https://cdn1.tripoto.com/media/filter/nxxl/img/1516992/Image/1670586625_img_0434.jpg", title: "beach" }, 5 | { url: "https://cdn1.tripoto.com/media/filter/nxxl/img/2215463/Image/1669102212_1667974883_web1.jpeg", title: "boat" }, 6 | { url: "https://cdn1.tripoto.com/media/filter/nxxl/img/2224454/Image/1670482094_homepage_recovered_op2.jpg", title: "forest" }, 7 | 8 | ]; 9 | const containerStyles = { 10 | margin:"auto", 11 | marginTop:"150px", 12 | width: "80%", 13 | height: "350px", 14 | 15 | }; 16 | return ( 17 |
18 | 19 |
20 | 21 |
22 |
23 | ); 24 | }; 25 | 26 | export default Slider; -------------------------------------------------------------------------------- /my-app/src/Pankaj/Insportlight/Inspotlight.module.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | color: #333; 3 | height: 283.115px; 4 | width: 289px; 5 | margin: 0 0 30px 0; 6 | min-height: 1px; 7 | padding: 0 15px 0 15px; 8 | text-align: left; 9 | 10 | } 11 | .imge{ 12 | height: 11rem; 13 | width: 16rem; 14 | border-radius: 5px; 15 | } 16 | 17 | .title{ 18 | color: #FF6633; 19 | height: 17.1354px; 20 | width: 59.1345; 21 | font-size: 12px; 22 | font-weight: 700; 23 | line-height: 17.1429px; 24 | white-space: nowrap; 25 | word-spacing: 0px; 26 | margin-top: 5px; 27 | } 28 | .des{ 29 | font-family: circularairpro-bold,Arial, Helvetica; 30 | font-size: 18px; 31 | font-weight: 700; 32 | text-decoration: none solid rgb(51, 51, 51); 33 | text-transform: capitalize; 34 | word-spacing: 0px; 35 | color: #333333; 36 | height: 102.833px; 37 | width: 259px; 38 | margin: 8px 0 0; 39 | } 40 | 41 | -------------------------------------------------------------------------------- /my-app/src/Home_Page_Component/home_page_img.module.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | color:white; 5 | margin: auto; 6 | 7 | } 8 | 9 | .top_img{ 10 | height:360px; 11 | width:100%; 12 | text-align: center; 13 | background-image: url("https://cdn1.tripoto.com/assets/2.9/img/home_banner_road.jpg"); 14 | 15 | background-color: #cccccc; /* Used if the image is unavailable */ 16 | 17 | background-position: center; /* Center the image */ 18 | background-repeat: no-repeat; /* Do not repeat the image */ 19 | background-size: cover; 20 | border: .1px solid white; 21 | } 22 | 23 | .top_img_div>h1{ 24 | text-align: center; 25 | margin-top: 140px; 26 | } 27 | .top_img_div>input{ 28 | width: 600px; 29 | height: 50px; 30 | border-radius: 10px; 31 | margin-top: 20px; 32 | text-align: center; 33 | font-size: 16px; 34 | } 35 | 36 | -------------------------------------------------------------------------------- /my-app/src/Routes/AllRoutes.jsx: -------------------------------------------------------------------------------- 1 | import { Routes, Route } from "react-router-dom"; 2 | import Admin from "../AdminPanal/admin"; 3 | import Beach from "../beaches/Beach"; 4 | import Homepage from "../Navbar/Home"; 5 | import Product from "../Packages/product"; 6 | import SinglePage from "../Packages/singlepage"; 7 | import PrivateRoute from "../Components/PrivateRoute"; 8 | import { Center, Heading } from "@chakra-ui/react"; 9 | 10 | const AllRoutes = () => { 11 | return ( 12 | 13 | } /> 14 | } /> 15 | } /> 16 | } /> 17 | } /> 18 | 22 | Page Does Not Exist 23 | 24 | } 25 | /> 26 | 27 | ); 28 | }; 29 | 30 | export { AllRoutes }; 31 | -------------------------------------------------------------------------------- /my-app/src/AdminPanal/admin.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | Box, 3 | Tab, 4 | TabList, 5 | TabPanel, 6 | TabPanels, 7 | Tabs, 8 | Image, 9 | } from "@chakra-ui/react"; 10 | import { useState } from "react"; 11 | import AddProdct from "./addProduct"; 12 | import AdminNav from "./Adminnav"; 13 | import DeleteItem from "./Delete"; 14 | import OrderItem from "./orders"; 15 | 16 | const Admin = () => { 17 | const [showPage, setShowPage] = useState("AddProdct"); 18 | 19 | return ( 20 | 21 | 22 | 28 | ; 29 | 30 | 31 | 32 | 33 | 34 | {showPage == "AddProdct" ? : null} 35 | {showPage == "OrderItem" ? : null} 36 | {showPage == "DeleteItem" ? : null} 37 | 38 | 39 | ); 40 | }; 41 | 42 | export default Admin; 43 | -------------------------------------------------------------------------------- /my-app/src/Home_Page_Component/Small_Img_Box.jsx: -------------------------------------------------------------------------------- 1 | import { Grid } from "@chakra-ui/react"; 2 | import { Image } from '@chakra-ui/react' 3 | function Small_Img_Box() { 4 | const outer_div = { 5 | width: "85%", 6 | margin:"auto", 7 | marginTop:"50px", 8 | }; 9 | 10 | // const inner_div = { 11 | // display: "flex", 12 | // }; 13 | 14 | return ( 15 |
16 | 17 | 18 | Dan Abramov 19 | Dan Abramov 20 | Dan Abramov 21 | Dan Abramov 22 | 23 |
24 | ); 25 | } 26 | 27 | export default Small_Img_Box; 28 | -------------------------------------------------------------------------------- /my-app/src/Pankaj/Find/Find.module.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | color: #333; 3 | height: 283.115px; 4 | width: 289px; 5 | /* margin: 0 0 30px 0; */ 6 | min-height: 1px; 7 | padding: 0 15px 0 15px; 8 | text-align: left; 9 | 10 | } 11 | .imge{ 12 | height: 11rem; 13 | width: 16rem; 14 | border-radius: 5px; 15 | } 16 | 17 | /* .title{ 18 | color: #FF6633; 19 | height: 17.1354px; 20 | width: 59.1345; 21 | font-size: 12px; 22 | font-weight: 700; 23 | line-height: 17.1429px; 24 | white-space: nowrap; 25 | word-spacing: 0px; 26 | margin-top: 5px; 27 | } */ 28 | .des{ 29 | font-family: circularairpro-bold,Arial, Helvetica; 30 | font-size: 18px; 31 | font-weight: 700; 32 | text-decoration: none solid rgb(51, 51, 51); 33 | text-transform: capitalize; 34 | word-spacing: 0px; 35 | color: #333333; 36 | /* height: 102.833px; */ 37 | width: 259px; 38 | margin: 8px 0 0 0; 39 | 40 | 41 | } 42 | .bydiv{ 43 | margin-top: 5px; 44 | font-family: apple-system, Arial, Helvetica, sans-serif; 45 | } 46 | .by{ 47 | font-size: 14px; 48 | margin-right: 0.5rem; 49 | margin-left: 0.1rem; 50 | } 51 | .byname{ 52 | color: #1C70A2; 53 | font-size: 14px; 54 | } -------------------------------------------------------------------------------- /my-app/src/Pankaj/Place/Place.module.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | color: #333; 3 | height: 283.115px; 4 | width: 289px; 5 | /* margin: 0 0 30px 0; */ 6 | min-height: 1px; 7 | padding: 0 15px 0 15px; 8 | text-align: left; 9 | 10 | } 11 | .imge{ 12 | height: 11rem; 13 | width: 16rem; 14 | border-radius: 5px; 15 | } 16 | 17 | /* .title{ 18 | color: #FF6633; 19 | height: 17.1354px; 20 | width: 59.1345; 21 | font-size: 12px; 22 | font-weight: 700; 23 | line-height: 17.1429px; 24 | white-space: nowrap; 25 | word-spacing: 0px; 26 | margin-top: 5px; 27 | } */ 28 | .des{ 29 | font-family: circularairpro-bold,Arial, Helvetica; 30 | font-size: 18px; 31 | font-weight: 700; 32 | text-decoration: none solid rgb(51, 51, 51); 33 | text-transform: capitalize; 34 | word-spacing: 0px; 35 | color: #333333; 36 | /* height: 102.833px; */ 37 | width: 240px; 38 | margin: 8px 0 0 0; 39 | 40 | 41 | } 42 | .bydiv{ 43 | margin-top: 5px; 44 | font-family: apple-system, Arial, Helvetica, sans-serif; 45 | } 46 | .by{ 47 | font-size: 14px; 48 | margin-right: 0.5rem; 49 | margin-left: 0.1rem; 50 | } 51 | .byname{ 52 | color: #1C70A2; 53 | font-size: 14px; 54 | } -------------------------------------------------------------------------------- /my-app/src/Pankaj/Check/Check.module.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | color: #333; 3 | height: 283.115px; 4 | width: 289px; 5 | margin: 0 0 30px 0; 6 | min-height: 1px; 7 | padding: 0 15px 0 15px; 8 | text-align: left; 9 | 10 | } 11 | .imge{ 12 | height: 11rem; 13 | width: 16rem; 14 | border-radius: 5px; 15 | } 16 | 17 | .title{ 18 | color: #FF6633; 19 | height: 17.1354px; 20 | width: 59.1345; 21 | font-size: 12px; 22 | font-weight: 700; 23 | line-height: 17.1429px; 24 | white-space: nowrap; 25 | word-spacing: 0px; 26 | margin-top: 5px; 27 | } 28 | .des{ 29 | font-family: circularairpro-bold,Arial, Helvetica; 30 | font-size: 18px; 31 | font-weight: 700; 32 | text-decoration: none solid rgb(51, 51, 51); 33 | text-transform: capitalize; 34 | word-spacing: 0px; 35 | color: #333333; 36 | /* height: 102.833px; */ 37 | width: 259px; 38 | margin: 8px 0 0 0; 39 | 40 | 41 | } 42 | 43 | .bydiv{ 44 | margin-top: 5px; 45 | font-family: apple-system, Arial, Helvetica, sans-serif; 46 | } 47 | .by{ 48 | font-size: 14px; 49 | margin-right: 0.5rem; 50 | margin-left: 0.1rem; 51 | } 52 | .byname{ 53 | color: #1C70A2; 54 | font-size: 14px; 55 | } 56 | 57 | -------------------------------------------------------------------------------- /my-app/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | // import HomePage from './Home_Page/Main_Page'; 3 | import Signup from "./Components/Signup"; 4 | import Login from "./Components/Login"; 5 | 6 | import "./App.css"; 7 | import { Navbar } from "./Navbar/Navbar"; 8 | import { useEffect, useState } from "react"; 9 | import HamburgerMenu from "./Navbar/HamburgerMenu"; 10 | import Homepage from "./Navbar/Home"; 11 | import Footer from "./Footer/Footer"; 12 | import Beach from "./beaches/Beach"; 13 | // import HomePage from './HomePage/Main_Page'; 14 | import Product from "./Packages/product"; 15 | import { AllRoutes } from "./Routes/AllRoutes"; 16 | 17 | function App() { 18 | const [ham, setHam] = useState(false); 19 | const changeNav = () => { 20 | if (window.innerWidth < 500) { 21 | setHam(true); 22 | } else { 23 | setHam(false); 24 | } 25 | }; 26 | useEffect(() => { 27 | window.addEventListener("resize", changeNav); 28 | }, []); 29 | return ( 30 |
31 | {ham ? : } 32 | 33 | {/* */} 34 | 35 |
36 |
37 | ); 38 | } 39 | 40 | export default App; 41 | -------------------------------------------------------------------------------- /my-app/src/AdminPanal/Adminnav.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Flex, Heading } from "@chakra-ui/react"; 2 | import { useState } from "react"; 3 | import OrderItem from "./orders"; 4 | 5 | const AdminNav = ({ setShowPage }) => { 6 | return ( 7 | 8 | 9 | setShowPage("AddProdct")} 14 | size={"md"} 15 | > 16 | Add Packages 17 | 18 | setShowPage("OrderItem")} 23 | size={"md"} 24 | > 25 | Orders 26 | 27 | setShowPage("DeleteItem")} 32 | size={"md"} 33 | > 34 | Delete 35 | 36 | 37 | 38 | ); 39 | }; 40 | export default AdminNav; 41 | -------------------------------------------------------------------------------- /my-app/src/Pankaj/Watch/Watch.module.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | color: #333; 3 | height: 283.115px; 4 | width: 289px; 5 | /* margin: 0 0 30px 0; */ 6 | min-height: 1px; 7 | padding: 0 15px 0 15px; 8 | text-align: left; 9 | 10 | } 11 | .imgdiv{ 12 | height: 250px; 13 | width: 250px; 14 | overflow: hidden; 15 | vertical-align: middle; 16 | 17 | } 18 | .imge{ 19 | height: 600; 20 | width: 600; 21 | border-radius: 5px; 22 | vertical-align: middle; 23 | } 24 | 25 | /* .title{ 26 | color: #FF6633; 27 | height: 17.1354px; 28 | width: 59.1345; 29 | font-size: 12px; 30 | font-weight: 700; 31 | line-height: 17.1429px; 32 | white-space: nowrap; 33 | word-spacing: 0px; 34 | margin-top: 5px; 35 | } */ 36 | .des{ 37 | font-family: circularairpro-bold,Arial, Helvetica; 38 | font-size: 18px; 39 | font-weight: 700; 40 | text-decoration: none solid rgb(51, 51, 51); 41 | text-transform: capitalize; 42 | word-spacing: 0px; 43 | color: #333333; 44 | /* height: 102.833px; */ 45 | width: 240px; 46 | margin: 8px 0 0 0; 47 | 48 | 49 | } 50 | .bydiv{ 51 | margin-top: 5px; 52 | font-family: apple-system, Arial, Helvetica, sans-serif; 53 | } 54 | .by{ 55 | font-size: 14px; 56 | margin-right: 0.5rem; 57 | margin-left: 0.1rem; 58 | } 59 | .byname{ 60 | color: #1C70A2; 61 | font-size: 14px; 62 | } -------------------------------------------------------------------------------- /my-app/src/Pankaj/Redux/Action.js: -------------------------------------------------------------------------------- 1 | import { LOGIN_FAILURE, LOGIN_LOADING, LOGIN_SUCCESS, LOGOUT_SUCCESS, PROFILE_FAILURE, PROFILE_LOADING, PROFILE_SUCCESS, REGISTER_FAILURE, REGISTER_LOADING, REGISTER_SUCCESS } from "./ActionType" 2 | import axios from "axios" 3 | 4 | export const register=(payload)=>(dispatch)=>{ 5 | dispatch({type:REGISTER_LOADING}) 6 | console.log(payload) 7 | return axios.post(`https://masai-api-mocker.herokuapp.com/auth/register`,payload).then((r)=>{ 8 | dispatch({type:REGISTER_SUCCESS,payload:r.data}); 9 | console.log("Reg Success") 10 | return REGISTER_SUCCESS 11 | }) 12 | .catch((e)=>{ 13 | dispatch({type:REGISTER_FAILURE,payload:e}); 14 | return REGISTER_FAILURE 15 | }) 16 | } 17 | 18 | 19 | export const login=(payload)=>(dispatch)=>{ 20 | dispatch({type:LOGIN_LOADING}) 21 | 22 | return axios.post(`https://masai-api-mocker.herokuapp.com/auth/login`,payload).then((r)=>{ 23 | dispatch({type:LOGIN_SUCCESS,payload:r.data.token}); 24 | console.log(r.data) 25 | return LOGIN_SUCCESS 26 | }) 27 | .catch((e)=>{ 28 | dispatch({type:LOGIN_FAILURE,payload:e}) 29 | return LOGIN_FAILURE 30 | }) 31 | } 32 | 33 | 34 | export const logout=()=>(dispatch)=>{ 35 | return dispatch({type:LOGOUT_SUCCESS}) 36 | } 37 | 38 | 39 | -------------------------------------------------------------------------------- /my-app/src/Context/ShowContext.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react' 3 | import { useState } from 'react' 4 | import { createContext } from 'react' 5 | 6 | export const ShowContext = createContext() 7 | function ShowContextProvider({children}) { 8 | 9 | const [show, setShow] = useState(false) 10 | const [isAuth,setIsAuth]=useState(false) 11 | 12 | const [formValue1,setFormValue1] =useState( {email:"",city:"",fullname:"",contact:"",option1:"",option2:"",date:"",image1:"",duration:"",cost:"",place:""}); 13 | const [formValue2,setFormValue2] =useState( {image:"",duration:"",cost:"",place:""}); 14 | 15 | 16 | const fillForm1=(form)=>{ 17 | setFormValue1({ 18 | email:form.email, 19 | city:form.city, 20 | fullname:form.fullname, 21 | contact:form.contact, 22 | option1:form.option1, 23 | option2:form.option2, 24 | date:form.date, 25 | }) 26 | } 27 | const fillForm2=(form)=>{ 28 | setFormValue2({ 29 | image:form.img, 30 | days:form.days, 31 | cost:form.cost, 32 | place:form.days 33 | }) 34 | } 35 | 36 | return ( 37 | 38 | 39 | {children} 40 | 41 | ) 42 | } 43 | 44 | export default ShowContextProvider 45 | 46 | -------------------------------------------------------------------------------- /my-app/src/Packages/singlepage.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Flex, Image } from "@chakra-ui/react"; 2 | import axios from "axios"; 3 | import { useEffect, useState } from "react"; 4 | import { useParams } from "react-router-dom"; 5 | import Checkout from "./checkout"; 6 | import ItemView from "./itemview"; 7 | 8 | const SinglePage = () => { 9 | const param = useParams(); 10 | 11 | const [data, setData] = useState({}); 12 | 13 | const getSingleProduct = () => { 14 | return axios.get( 15 | `https://fantastic-lab-coat-moth.cyclic.app/Package/${param.id}` 16 | ); 17 | }; 18 | 19 | useEffect(() => { 20 | getSingleProduct() 21 | .then((e) => setData(e.data)) 22 | .catch((e) => console.log(e)); 23 | }, []); 24 | 25 | return ( 26 | 27 | 33 |
34 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | ); 50 | }; 51 | 52 | export default SinglePage; 53 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ✨Tripoto-Clone✨ 2 | --- 3 | This is a collaborative Project from Masai School in the Construct Week. We are 4 members of the team: 4 | 5 | 1. Pankaj Singh 6 | 7 | 2. Nasir Imam 8 | 9 | 3. Rahul Singh 10 | 11 | 4. Shikha Gupta 12 | 13 | 💻Project Unique Name :- R.P.S.N Vacation ✈️ 14 | --- 15 | Tripoto is a travel Booking website, for providing end to end solution to to your travelling by making your bookings handy. 16 | 17 | 💫Tech & Tools Used : 18 | --- 19 | 20 | For Frontend : HTML5, CSS3, Javascript, ES6, ReactJS Redux. 21 | 22 | For database: Json Server (cyclic). 23 | 24 | Chakra UI (UI Styling Library) Styled-Components. 25 | 26 | For authentication: Google firebase authentication. 27 | 28 | --- 29 | | Serial No | Feature | 30 | | ----------------- | ------------------------------------------------------------------ | 31 | | 1 | User signup and Login | 32 | | 2 | Products Page with Filter and Sort Functionalities | 33 | | 3 | Dynamic add to cart and Wishlist feature | 34 | | 4 | Dynamic cart page and wishlist page using userId | 35 | | 5 | Admin Login & Page | 36 | | 6 | Dummy payment using UPI-Paytm | 37 | 38 | --- 39 | 40 | 41 | https://user-images.githubusercontent.com/107506646/208311924-c224a6b2-1ddc-4680-9bb1-1d9169f7a992.mp4 42 | 43 | 44 | 45 | --- 46 | Deployed Link : https://rpsn-vacations.netlify.app 47 | 48 | 49 | ---- 50 |

✨Thank You✨

51 | 52 | -------------------------------------------------------------------------------- /my-app/src/Footer/Footer.module.css: -------------------------------------------------------------------------------- 1 | #footer{ 2 | display: grid; 3 | margin: auto; 4 | grid-template-columns: repeat(5, 1fr); 5 | width: 90%; 6 | margin-top: 20px; 7 | margin-bottom: 20px; 8 | 9 | } 10 | @media screen and (min-width: 1024px) { 11 | #footer { 12 | grid-template-columns: repeat(5, 1fr); 13 | } 14 | } 15 | 16 | @media screen and (min-width: 0px)and (max-width:424px) { 17 | #footer { 18 | grid-template-columns: repeat(1, 1fr); 19 | } 20 | } 21 | 22 | @media screen and (min-width: 425px) and (max-width:767px) { 23 | #footer { 24 | grid-template-columns: repeat(3, 1fr); 25 | } 26 | #footer div:nth-child(1){ 27 | grid-area: 1/1/2/2; 28 | } 29 | #footer div:nth-child(2){ 30 | grid-area: 2/1/3/2; 31 | } 32 | #footer div:nth-child(3){ 33 | grid-area: 2/2/3/4; 34 | } 35 | #footer div:nth-child(4){ 36 | grid-area: 3/1/3/2; 37 | } 38 | #footer div:nth-child(5){ 39 | grid-area: 3/2/3/4; 40 | } 41 | } 42 | 43 | @media screen and (min-width: 768px)and (max-width:1023px){ 44 | #footer { 45 | grid-template-columns: repeat(4, 1fr); 46 | } 47 | #footer div:nth-child(1){ 48 | grid-area: 1; 49 | } 50 | #footer div:nth-child(2){ 51 | grid-area: 2/1/3/2; 52 | } 53 | #footer div:nth-child(3){ 54 | grid-area: 2/2/3/3; 55 | } 56 | #footer div:nth-child(4){ 57 | grid-area: 2/3/3/4; 58 | } 59 | #footer div:nth-child(5){ 60 | grid-area: 2/4/3/5; 61 | } 62 | } -------------------------------------------------------------------------------- /my-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@chakra-ui/react": "^2.4.3", 7 | "@emotion/react": "^11.10.5", 8 | "@emotion/styled": "^11.10.5", 9 | "@testing-library/jest-dom": "^5.16.5", 10 | "@testing-library/react": "^13.4.0", 11 | "@testing-library/user-event": "^13.5.0", 12 | "axios": "^1.2.1", 13 | "firebase": "^9.15.0", 14 | "framer-motion": "^7.8.0", 15 | "json-server": "^0.17.1", 16 | "react": "^18.2.0", 17 | "react-carousel": "^4.3.0", 18 | "react-dom": "^18.2.0", 19 | "react-icons": "^4.7.1", 20 | "react-redux": "^8.0.5", 21 | "react-responsive-carousel": "^3.2.23", 22 | "react-router-dom": "^6.4.5", 23 | "react-scripts": "5.0.1", 24 | "react-slick": "^0.29.0", 25 | "redux": "^4.2.0", 26 | "redux-thunk": "^2.4.2", 27 | "slick-carousel": "^1.8.1", 28 | "styled-components": "^5.3.6", 29 | "swiper": "^8.4.5", 30 | "web-vitals": "^2.1.4" 31 | 32 | }, 33 | "scripts": { 34 | "server": "json-server --watch db.json --port 8080", 35 | "start": "react-scripts start", 36 | "build": "react-scripts build", 37 | "test": "react-scripts test", 38 | "eject": "react-scripts eject" 39 | }, 40 | "eslintConfig": { 41 | "extends": [ 42 | "react-app", 43 | "react-app/jest" 44 | ] 45 | }, 46 | "browserslist": { 47 | "production": [ 48 | ">0.2%", 49 | "not dead", 50 | "not op_mini all" 51 | ], 52 | "development": [ 53 | "last 1 chrome version", 54 | "last 1 firefox version", 55 | "last 1 safari version" 56 | ] 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /my-app/src/Pankaj/Redux/Reducer.js: -------------------------------------------------------------------------------- 1 | import { LOGIN_FAILURE, LOGIN_LOADING, LOGIN_SUCCESS, LOGOUT_SUCCESS, PROFILE_FAILURE, PROFILE_LOADING, PROFILE_SUCCESS, REGISTER_FAILURE, REGISTER_LOADING, REGISTER_SUCCESS } from "./ActionType" 2 | 3 | let token=localStorage.getItem("token") 4 | 5 | const initialState={ 6 | isAuth: false , 7 | token:token || "", 8 | isLoading:false, 9 | isError:false, 10 | } 11 | 12 | 13 | export const reducer=(state=initialState,action)=>{ 14 | const {type,payload}=action 15 | switch(type){ 16 | case REGISTER_LOADING:{ 17 | return { 18 | ...state, 19 | isLoading:true, 20 | isError:false 21 | } 22 | } 23 | case REGISTER_SUCCESS:{ 24 | 25 | return { 26 | ...state, 27 | isLoading:false, 28 | isError:false, 29 | isAuth: true, 30 | } 31 | } 32 | case REGISTER_FAILURE:{ 33 | return { 34 | ...state, 35 | isLoading:false, 36 | isError:true, 37 | isAuth:true, 38 | } 39 | } 40 | 41 | 42 | 43 | case LOGIN_LOADING:{ 44 | return { 45 | ...state, 46 | isLoading:true, 47 | isError:false 48 | } 49 | } 50 | case LOGIN_SUCCESS:{ 51 | localStorage.setItem("token",payload) 52 | return { 53 | ...state, 54 | isLoading:false, 55 | isError:false, 56 | token:payload, 57 | isAuth:true 58 | } 59 | } 60 | case LOGIN_FAILURE:{ 61 | return { 62 | ...state, 63 | isLoading:false, 64 | isError:true, 65 | isAuth:true, 66 | token:"" 67 | } 68 | } 69 | 70 | case LOGOUT_SUCCESS:{ 71 | return { 72 | isAuth:true 73 | } 74 | } 75 | 76 | 77 | 78 | 79 | 80 | default:{ 81 | return state 82 | } 83 | } 84 | } -------------------------------------------------------------------------------- /my-app/src/AdminPanal/Delete.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | Box, 3 | Button, 4 | Flex, 5 | FormControl, 6 | FormLabel, 7 | Heading, 8 | Input, 9 | useToast, 10 | } from "@chakra-ui/react"; 11 | import axios from "axios"; 12 | import { useState } from "react"; 13 | 14 | const DeleteItem = () => { 15 | const [id, setId] = useState(""); 16 | const toast = useToast(); 17 | 18 | const handleChange = (e) => { 19 | setId(e.target.value); 20 | }; 21 | 22 | const deleteByid = async (url) => { 23 | return await axios.delete(url); 24 | }; 25 | 26 | const handleClick = () => { 27 | if (id) { 28 | deleteByid(`https://fantastic-lab-coat-moth.cyclic.app/Package/${id}`) 29 | .then( 30 | (e) => ( 31 | setId(""), 32 | toast({ 33 | title: "Package Deleted", 34 | status: "warning", 35 | duration: 9000, 36 | isClosable: true, 37 | }) 38 | ) 39 | ) 40 | .catch( 41 | (e) => ( 42 | setId(""), 43 | toast({ 44 | title: "Package Deleted", 45 | status: "warning", 46 | duration: 9000, 47 | isClosable: true, 48 | }) 49 | ) 50 | ); 51 | } 52 | }; 53 | 54 | return ( 55 | 56 | 57 | Delete Product 58 | 63 | 64 | 65 | 73 | 74 | 75 | ); 76 | }; 77 | 78 | export default DeleteItem; 79 | -------------------------------------------------------------------------------- /my-app/src/Home_Page_Component/home_page_img.jsx: -------------------------------------------------------------------------------- 1 | // import React from "react"; 2 | // import styles from "./home_page_img.module.css"; 3 | 4 | // function HomePage_img() { 5 | // return ( 6 | //
7 | //
8 | 9 | 10 | //

India's Largest Community of Travellers

11 | // 19 | // {/* */} 20 | 21 | //
22 | //
23 | // ); 24 | // } 25 | // export default HomePage_img; 26 | 27 | // import { Box, Heading, Input } from "@chakra-ui/react"; 28 | // import React, { useState } from "react"; 29 | // import styles from "./BgImage.module.css"; 30 | 31 | // function BgImage() { 32 | // return ( 33 | // 34 | // 35 | // 42 | // 43 | // Exclusive Tours & Holiday Packages 44 | // 45 | // 52 | // 53 | // Stay with activities 54 | // Destination Packages 55 | // Rajasthan 56 | // Manali 57 | // Himanchal 58 | // Rishikesh 59 | // Uttarakhand 60 | // 61 | // 62 | // 63 | // ); 64 | // } 65 | 66 | // export default BgImage; 67 | -------------------------------------------------------------------------------- /my-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 17 | 18 | 19 | 23 | 24 | 28 | 29 | 38 | React App 39 | 40 | 41 | 42 |
43 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /my-app/src/Navbar/HamburgerMenu.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | Avatar, 3 | Box, 4 | Button, 5 | Drawer, 6 | DrawerBody, 7 | DrawerContent, 8 | DrawerHeader, 9 | DrawerOverlay, 10 | Image, 11 | useDisclosure, 12 | } from "@chakra-ui/react"; 13 | import React, { useContext, useState } from "react"; 14 | import { GiHamburgerMenu } from "react-icons/gi"; 15 | import { NavLink } from "react-router-dom"; 16 | import { ShowContext } from "../Context/ShowContext"; 17 | 18 | function HamburgerMenu() { 19 | const { isOpen, onOpen, onClose } = useDisclosure(); 20 | const [placement, setPlacement] = React.useState("top"); 21 | const { show, setShow } = useContext(ShowContext); 22 | 23 | 24 | return ( 25 | <> 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 46 | 47 | Visit Singapore 48 | 49 | Beaches 50 | Packages 51 | 52 |
53 | 54 | 55 | 56 | 57 | ); 58 | } 59 | 60 | export default HamburgerMenu; 61 | -------------------------------------------------------------------------------- /my-app/src/Home_Page_Component/ImageSlider.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const slideStyles = { 4 | width: "auto", 5 | height: "100%", 6 | borderRadius: "10px", 7 | backgroundSize: "cover", 8 | // backgroundPosition: "center", 9 | }; 10 | 11 | const rightArrowStyles = { 12 | position: "absolute", 13 | top: "50%", 14 | transform: "translate(0, -50%)", 15 | right: "32px", 16 | fontSize: "45px", 17 | color: "#fff", 18 | zIndex: 1, 19 | cursor: "pointer", 20 | }; 21 | 22 | const leftArrowStyles = { 23 | position: "absolute", 24 | top: "50%", 25 | transform: "translate(0, -50%)", 26 | left: "32px", 27 | fontSize: "45px", 28 | color: "#fff", 29 | zIndex: 1, 30 | cursor: "pointer", 31 | }; 32 | 33 | const sliderStyles = { 34 | position: "relative", 35 | height: "100%", 36 | }; 37 | 38 | // const dotsContainerStyles = { 39 | // display: "flex", 40 | // justifyContent: "center", 41 | // }; 42 | 43 | // const dotStyle = { 44 | // margin: "0 3px", 45 | // cursor: "pointer", 46 | // fontSize: "20px", 47 | // }; 48 | 49 | const ImageSlider = ({ slides }) => { 50 | const [currentIndex, setCurrentIndex] = useState(0); 51 | const goToPrevious = () => { 52 | const isFirstSlide = currentIndex === 0; 53 | const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1; 54 | setCurrentIndex(newIndex); 55 | }; 56 | const goToNext = () => { 57 | const isLastSlide = currentIndex === slides.length - 1; 58 | const newIndex = isLastSlide ? 0 : currentIndex + 1; 59 | setCurrentIndex(newIndex); 60 | }; 61 | const goToSlide = (slideIndex) => { 62 | setCurrentIndex(slideIndex); 63 | }; 64 | const slideStylesWidthBackground = { 65 | ...slideStyles, 66 | backgroundImage: `url(${slides[currentIndex].url})`, 67 | }; 68 | 69 | return ( 70 |
71 |
72 |
73 | ❰ 74 |
75 |
76 | ❱ 77 |
78 |
79 |
80 | {/*
81 | {slides.map((slide, slideIndex) => ( 82 |
goToSlide(slideIndex)} 86 | > 87 | ● 88 |
89 | ))} 90 |
*/} 91 |
92 | ); 93 | }; 94 | 95 | export default ImageSlider; -------------------------------------------------------------------------------- /my-app/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /my-app/src/AdminPanal/adminLogin.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | AlertDialog, 3 | AlertDialogBody, 4 | AlertDialogContent, 5 | AlertDialogFooter, 6 | AlertDialogHeader, 7 | AlertDialogOverlay, 8 | Box, 9 | Button, 10 | Input, 11 | useDisclosure, 12 | useToast, 13 | } from "@chakra-ui/react"; 14 | import React, { useState } from "react"; 15 | import { useNavigate } from "react-router-dom"; 16 | 17 | function AdminLogin() { 18 | const { isOpen, onOpen, onClose } = useDisclosure(); 19 | const cancelRef = React.useRef(); 20 | const [pass, setPass] = useState(""); 21 | const navigate = useNavigate(); 22 | const toast = useToast(); 23 | 24 | const handleChange = (e) => { 25 | setPass(e.target.value); 26 | }; 27 | 28 | const handleAdminLogin = () => { 29 | if (pass) { 30 | if (pass == "12345678") { 31 | navigate("/admin"); 32 | } else { 33 | toast({ 34 | title: "Wrong Password", 35 | description: "Type Correct Password", 36 | status: "error", 37 | duration: 5000, 38 | isClosable: true, 39 | }); 40 | } 41 | } 42 | }; 43 | 44 | return ( 45 | <> 46 | 47 | Admin 48 | 49 | 50 | 55 | 56 | 57 | 58 | Confirm Admin Password 59 | 60 | 61 | 62 | 68 | 69 | 70 | 71 | 74 | 83 | 84 | 85 | 86 | 87 | 88 | ); 89 | } 90 | 91 | export default AdminLogin; 92 | -------------------------------------------------------------------------------- /my-app/src/AdminPanal/orders.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | Box, 3 | Heading, 4 | Table, 5 | Thead, 6 | Tbody, 7 | Tfoot, 8 | Tr, 9 | Th, 10 | Td, 11 | TableCaption, 12 | TableContainer, 13 | Button, 14 | } from "@chakra-ui/react"; 15 | import axios from "axios"; 16 | import { useEffect } from "react"; 17 | import { useState } from "react"; 18 | 19 | const OrderItem = () => { 20 | const getOrderData = async (url) => { 21 | return await axios.get(url); 22 | }; 23 | 24 | const deleteOrder = async (url, id) => { 25 | return await axios.delete(`${url}/${id}`); 26 | }; 27 | 28 | const [data, setData] = useState([]); 29 | 30 | useEffect(() => { 31 | if (data.length === 0) { 32 | getOrderData("https://powerful-lingerie-fawn.cyclic.app/booking").then( 33 | (e) => setData(e.data) 34 | ); 35 | } 36 | }, [data.length]); 37 | 38 | const handleDelete = (id) => { 39 | deleteOrder("https://powerful-lingerie-fawn.cyclic.app/booking", id) 40 | .then((e) => getOrderData()) 41 | .catch((e) => getOrderData()); 42 | }; 43 | 44 | console.log(data); 45 | 46 | return ( 47 | 48 | 49 | Imperial to metric conversion factors 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | {data.map((elem) => ( 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 85 | 86 | ))} 87 | 88 |
S.NoNameEmailNumberGuest CityNo Of GuestNo Of RoomsCheck In DatePackage ID
{elem.id}{elem.name}{elem.email}{elem.contect}{elem.city}{elem.people}{elem.room}{elem.date}{elem.packegeID} 76 | 84 |
89 | 90 | ); 91 | }; 92 | 93 | export default OrderItem; 94 | -------------------------------------------------------------------------------- /my-app/src/Pankaj/Book/Book.module.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | color: #333; 3 | /* height: 283.115px; */ 4 | width: 289px; 5 | margin: 0 0 30px 0; 6 | min-height: 1px; 7 | padding: 0 15px 0 15px; 8 | text-align: left; 9 | color: #333; 10 | 11 | 12 | } 13 | .imge{ 14 | height: 11rem; 15 | width: 22rem; 16 | border-radius: 5px; 17 | } 18 | 19 | .title{ 20 | color: #101010; 21 | height: 17.1354px; 22 | width: 59.1345; 23 | font-size: 12px; 24 | font-weight: 700; 25 | line-height: 17.1429px; 26 | white-space: nowrap; 27 | word-spacing: 0px; 28 | margin-top: 5px; 29 | margin-left: 0.23rem; 30 | } 31 | .des{ 32 | font-family: circularairpro-bold,Arial, Helvetica; 33 | font-size: 18px; 34 | font-weight: 700; 35 | text-decoration: none solid rgb(51, 51, 51); 36 | text-transform: capitalize; 37 | word-spacing: 0px; 38 | color: #333333; 39 | /* height: 102.833px; */ 40 | width: 21rem; 41 | margin: 8px 0 0 0; 42 | 43 | 44 | } 45 | 46 | .bydiv{ 47 | margin-top: 15px; 48 | font-family: apple-system, Arial, Helvetica, sans-serif; 49 | color: #101010; 50 | } 51 | .by{ 52 | font-size: 14px; 53 | margin-right: 0.5rem; 54 | margin-left: 0.1rem; 55 | color: #111212; 56 | } 57 | .byname{ 58 | color: #242525; 59 | font-size: 14px; 60 | } 61 | 62 | .btn{ 63 | font-family: apple-system, Arial, Helvetica; 64 | color: rgb(43, 42, 42); 65 | background-color: #359391; ; 66 | border-radius: 50px; 67 | border: none; 68 | font-size: 12px; 69 | padding: 3px 7px 3px 7px; 70 | } 71 | .spbtn{ 72 | margin-left: 96px; 73 | color: #101010; 74 | } 75 | 76 | .pri{ 77 | display: flex; 78 | justify-content: space-between; 79 | margin-top: 1.5rem; 80 | color: #101010; 81 | 82 | } 83 | .prdiv{ 84 | margin-top: 0.5rem; 85 | color: #101010; 86 | } 87 | 88 | .pr{ 89 | font-size: 18px; 90 | font-weight: 700; 91 | color: #333333; 92 | } 93 | .per{ 94 | font-size: 14px; 95 | color: rgb(25, 25, 25); 96 | font-weight: 100; 97 | margin-left: 0.5rem; 98 | 99 | } 100 | 101 | .smbox{ 102 | border: 1px solid #676868; 103 | padding: 0.4rem ; 104 | width: 5rem; 105 | height: 3rem; 106 | text-align: center; 107 | color: #151515; 108 | border-radius: 5px; 109 | margin-right: 5rem; 110 | font-size: 14px; 111 | 112 | 113 | } 114 | 115 | .ls{ 116 | 117 | display: flex; 118 | gap:1rem; 119 | color: #101010; 120 | } 121 | .lsimg{ 122 | height: 30px; 123 | width: 30px; 124 | border-radius: 15px; 125 | } 126 | .lstex{ 127 | font-size: 14px; 128 | text-transform: capitalize; 129 | margin-top: 4px; 130 | color: #333333; 131 | } -------------------------------------------------------------------------------- /my-app/src/Pankaj/Travel/Travel.module.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | color: #333; 3 | /* height: 283.115px; */ 4 | width: 289px; 5 | margin: 0 0 30px 0; 6 | min-height: 1px; 7 | padding: 0 15px 0 15px; 8 | text-align: left; 9 | 10 | 11 | } 12 | .imge{ 13 | height: 11rem; 14 | width: 22rem; 15 | border-radius: 5px; 16 | } 17 | 18 | .title{ 19 | color: #359391; 20 | height: 17.1354px; 21 | width: 59.1345; 22 | font-size: 12px; 23 | font-weight: 700; 24 | line-height: 17.1429px; 25 | white-space: nowrap; 26 | word-spacing: 0px; 27 | margin-top: 5px; 28 | margin-left: 0.23rem; 29 | } 30 | .des{ 31 | font-family: circularairpro-bold,Arial, Helvetica; 32 | font-size: 18px; 33 | font-weight: 700; 34 | text-decoration: none solid rgb(51, 51, 51); 35 | text-transform: capitalize; 36 | word-spacing: 0px; 37 | color: #333333; 38 | /* height: 102.833px; */ 39 | width: 21rem; 40 | margin: 8px 0 0 0; 41 | 42 | 43 | } 44 | 45 | .bydiv{ 46 | margin-top: 15px; 47 | font-family: apple-system, Arial, Helvetica, sans-serif; 48 | } 49 | .by{ 50 | font-size: 14px; 51 | margin-right: 0.5rem; 52 | margin-left: 0.1rem; 53 | color: #359391; 54 | } 55 | .byname{ 56 | color: #359391; 57 | font-size: 14px; 58 | } 59 | 60 | .btn{ 61 | font-family: apple-system, Arial, Helvetica; 62 | color: white; 63 | background-color: #359391; ; 64 | border-radius: 50px; 65 | border: none; 66 | font-size: 12px; 67 | padding: 3px 7px 3px 7px; 68 | } 69 | .spbtn{ 70 | margin-left: 10rem; 71 | } 72 | 73 | .pri{ 74 | display: flex; 75 | justify-content: space-between; 76 | margin-top: 1.5rem; 77 | 78 | } 79 | .prdiv{ 80 | margin-top: 0.5rem; 81 | } 82 | 83 | .pr{ 84 | font-size: 18px; 85 | font-weight: 700; 86 | color: #333333; 87 | } 88 | .per{ 89 | font-size: 14px; 90 | color: rgb(180, 180, 180); 91 | font-weight: 100; 92 | margin-left: 0.5rem; 93 | 94 | } 95 | 96 | .smbox{ 97 | border: 1px solid #359391; 98 | padding: 0.4rem ; 99 | width: 5rem; 100 | height: 2rem; 101 | text-align: center; 102 | color: #121313; 103 | border-radius: 5px; 104 | margin-right: 5rem; 105 | font-size: 14px; 106 | 107 | 108 | } 109 | 110 | .ls{ 111 | 112 | display: flex; 113 | gap:1rem; 114 | } 115 | .lsimg{ 116 | height: 30px; 117 | width: 30px; 118 | border-radius: 15px; 119 | } 120 | .lstex{ 121 | font-size: 14px; 122 | text-transform: capitalize; 123 | margin-top: 4px; 124 | color: #333333; 125 | } 126 | .check{ 127 | border: 1px solid black; 128 | width: 15px; 129 | 130 | background-color: #1C70A2; 131 | border-radius: 50%; 132 | padding-left: 2px; 133 | margin-left: 5px; 134 | 135 | } 136 | -------------------------------------------------------------------------------- /my-app/src/Home_Page_Component/Exclusive_box.jsx: -------------------------------------------------------------------------------- 1 | import { Grid } from "@chakra-ui/react"; 2 | import { 3 | Image, 4 | Box, 5 | Text, 6 | Link, 7 | Heading, 8 | Badge, 9 | Flex, 10 | Spacer, 11 | Button, 12 | } from "@chakra-ui/react"; 13 | 14 | function Exclusive_box() { 15 | const outer_div = { 16 | width: "85%", 17 | margin: "auto", 18 | marginTop: "50px", 19 | }; 20 | 21 | return ( 22 |
23 | 24 | 25 | Dan 32 | 33 | 10 Best Places To Experience The Chills This Winter 34 | 35 | 36 | 37 | 45 | D 49 | Manali 50 | 51 | 52 | 53 | 4D-3N 54 | 55 | 56 | 57 | 58 | 59 | 60 | 9,875/person 61 | 62 | 63 | 64 | 67 | 68 | 69 | 70 | 75 | Triopto's Mindfull Retreats 76 | 78 | 79 | 80 | 81 | 82 | 83 |
84 | ); 85 | } 86 | 87 | export default Exclusive_box; 88 | -------------------------------------------------------------------------------- /my-app/src/Navbar/Home.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Heading, Input, Text } from "@chakra-ui/react"; 2 | import React, { useContext, useEffect, useState } from "react"; 3 | import { ShowContext } from "../Context/ShowContext"; 4 | import "./Homepage.css"; 5 | import { Countries } from "./Countries"; 6 | import styled from "styled-components"; 7 | import { FaMapMarkerAlt } from "react-icons/fa"; 8 | import HomePage_Component from "../Home_Page_Component/Main_Page"; 9 | import {Home} from "../Pankaj/Home" 10 | const Homepage = () => { 11 | const { show, setShow } = useContext(ShowContext); 12 | const [result, setResults] = useState(""); 13 | const [data, setData] = useState([]); 14 | 15 | const handleResult = (e) => { 16 | setResults(e.target.value); 17 | }; 18 | 19 | useEffect(() => { 20 | if (result === "") { 21 | setData([]); 22 | } else { 23 | let show_data = Countries.filter((item) => { 24 | return item.country.toLowerCase().indexOf(result) !== -1 ? true : false; 25 | }); 26 | setData(show_data); 27 | } 28 | }, [result]); 29 | // console.log(data) 30 | 31 | return ( 32 |
33 | 34 | 35 | 40 | 41 | {!show && ( 42 | 43 | 44 | India's Largest Community of Travellers 45 | 46 | 52 | 53 | {data.map((item) => { 54 | return ( 55 | 56 | 57 | {item.country} 58 | 59 | 60 | ); 61 | })} 62 | 63 | 64 | )} 65 | 66 | 67 |
68 | {/* */} 69 | 70 |
71 | ); 72 | }; 73 | 74 | export const Resulter = styled.div` 75 | position: absolute; 76 | top: 100%; 77 | left: 10%; 78 | max-height: ${({ limit }) => `${limit * 34}px`}; 79 | border: 1px solid grey; 80 | border-bottom-left-radius: 5px; 81 | border-bottom-right-radius: 5px; 82 | background-color: white; 83 | width: 80%; 84 | overflow: scroll; 85 | `; 86 | 87 | export default Homepage; 88 | -------------------------------------------------------------------------------- /my-app/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /my-app/src/Packages/itemview.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | Box, 3 | Square, 4 | Image, 5 | Heading, 6 | Flex, 7 | Avatar, 8 | Center, 9 | Divider, 10 | Button, 11 | } from "@chakra-ui/react"; 12 | import axios from "axios"; 13 | import { useEffect, useState } from "react"; 14 | import { 15 | FaBinoculars, 16 | FaGem, 17 | FaHamburger, 18 | FaHiking, 19 | FaHome, 20 | FaMountain, 21 | FaPersonBooth, 22 | FaTree, 23 | FaWifi, 24 | } from "react-icons/fa"; 25 | import { useParams } from "react-router-dom"; 26 | 27 | const ItemView = ({ data }) => { 28 | 29 | return ( 30 | 31 | 32 | 33 | 34 | 35 | {data.title} 36 | 37 | 38 | 49 |
58 | {data.brand_name} 59 |
60 | 61 | 62 | 68 | 76 |
77 | {data.price}/person 78 |
79 | 80 | 81 | 82 | Location 83 | 84 | 90 | {data.location} 91 | 92 | 93 | 94 | Highlights 95 | 96 | 103 |
104 | 105 | Meals 106 |
107 |
108 | 109 | Sightseeing 110 |
111 |
112 | {" "} 113 | 114 | Homestay 115 |
116 |
117 | 118 | Adventure 119 |
120 |
121 | Hill Station 122 |
123 |
124 | Nature 125 |
126 |
127 | Wellness 128 |
129 |
130 | Hidden Gem 131 |
132 |
133 | 134 | Wi-Fi 135 |
136 | 137 | 138 | ); 139 | }; 140 | 141 | export default ItemView; 142 | -------------------------------------------------------------------------------- /my-app/src/Pankaj/Home.module.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .banner{ 4 | width: 100%; 5 | background-position: 50% 30%; 6 | object-position: 50% 30%; 7 | object-fit: cover; 8 | height: 340px; 9 | background-color: transparent; 10 | /* background-size: cover; */ 11 | } 12 | 13 | .hometop{ 14 | box-sizing: border-box; 15 | background-color: transparent; 16 | } 17 | .bannerh1{ 18 | 19 | margin: auto; 20 | top: 110px; 21 | width: 100%; 22 | position: absolute; 23 | color: #fff; 24 | font-family: circularairpro-bold,Helvetica,Arial,sans-serif; 25 | font-weight: 700; 26 | background-color: transparent; 27 | } 28 | 29 | .hh1{ 30 | font-family: inherit; 31 | font-weight: 500; 32 | line-height: 1.1; 33 | color: inherit; 34 | margin-top: 20px; 35 | margin-bottom: 10px; 36 | text-align: center; 37 | font-size: 36px; 38 | background-color: transparent; 39 | } 40 | 41 | .dark{ 42 | color: #333; 43 | 44 | background-color: transparent; 45 | 46 | 47 | 48 | } 49 | .inp{ 50 | 51 | margin: auto; 52 | 53 | width: 630px; 54 | max-width: 630px; 55 | position: relative; 56 | text-align: left; 57 | text-align: left; 58 | padding: 1rem; 59 | background-color: transparent; 60 | 61 | } 62 | .btn{ 63 | margin: 6px; 64 | padding: 12px; 65 | border-radius: 50%; 66 | border: none; 67 | cursor: pointer; 68 | } 69 | .btn img{ 70 | height: 16px; 71 | width: 17px; 72 | } 73 | 74 | .lig{ 75 | 76 | background-color: #fff; 77 | border-radius: 5px; 78 | 79 | } 80 | .in{ 81 | width: 89%; 82 | height: 3.2rem; 83 | border: none; 84 | margin-left: 0.5rem; 85 | 86 | 87 | } 88 | Input[type=text]{ 89 | border: none; 90 | } 91 | Input[type=text]:focus { 92 | border: none; 93 | } 94 | .bottomhome{ 95 | margin-left: 1vw; 96 | margin-right: 1vw; 97 | margin-top: 3rem; 98 | 99 | } 100 | 101 | .bandown{ 102 | display: flex; 103 | justify-content: space-around; 104 | 105 | 106 | } 107 | 108 | .bandown img{ 109 | height: 11vh; 110 | width: 19vw; 111 | } 112 | 113 | .container{ 114 | padding-top: 15px; 115 | padding-right: 15px; 116 | padding-left: 15px; 117 | margin-right: auto; 118 | margin-left: auto; 119 | } 120 | .cont{ 121 | padding-top: 10px; 122 | padding-right: 15px; 123 | padding-left: 15px; 124 | margin-right: auto; 125 | margin-left: 0.5rem; 126 | } 127 | 128 | .gif{ 129 | height: 260px; 130 | width: 100%; 131 | cursor: pointer; 132 | } 133 | 134 | .divgif{ 135 | margin-top: 2rem; 136 | } 137 | 138 | 139 | .find{ 140 | padding-right: 15px; 141 | padding-left: 5px; 142 | margin-right: auto; 143 | margin-left: auto; 144 | text-align: left; 145 | margin-top: 2rem; 146 | 147 | 148 | } 149 | .place{ 150 | padding-right: 15px; 151 | padding-left: 5px; 152 | margin-right: auto; 153 | margin-left: auto; 154 | text-align: left; 155 | } 156 | 157 | .creator{ 158 | padding-right: 15px; 159 | padding-left: 5px; 160 | margin-right: auto; 161 | margin-left: auto; 162 | text-align: left; 163 | margin-top: 2rem; 164 | } 165 | 166 | .creimg{ 167 | display: flex; 168 | gap:1.3rem; 169 | justify-content: center; 170 | 171 | 172 | } 173 | .creimg img{ 174 | height: 450px; 175 | width: 350px; 176 | } 177 | .plan{ 178 | padding-right: 15px; 179 | padding-left: 5px; 180 | margin-right: auto; 181 | margin-left: auto; 182 | text-align: left; 183 | margin-top: 2rem; 184 | } 185 | .watch{ 186 | padding-right: 15px; 187 | padding-left: 5px; 188 | margin-right: auto; 189 | margin-left: auto; 190 | text-align: left; 191 | margin-top: 2rem; 192 | } 193 | 194 | -------------------------------------------------------------------------------- /my-app/src/beaches/Comprehensive.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | import "slick-carousel/slick/slick.css"; 4 | import "slick-carousel/slick/slick-theme.css"; 5 | import Slider from "react-slick"; 6 | import styled from "styled-components"; 7 | import { IoIosArrowDropleft, IoIosArrowDropright } from "react-icons/io"; 8 | import { FaMapMarkerAlt } from "react-icons/fa"; 9 | 10 | const Comprehensive = () => { 11 | const [packag, setPackage] = useState([]); 12 | useEffect(() => { 13 | axios 14 | .get("https://persian-blue-hen-slip.cyclic.app/Comprehensive") 15 | .then((res) => { 16 | setPackage(res.data); 17 | }); 18 | }, []); 19 | 20 | function SampleNextArrow(props) { 21 | const { onClick } = props; 22 | return ( 23 |
32 | 33 |
34 | ); 35 | } 36 | 37 | function SamplePrevArrow(props) { 38 | const { onClick } = props; 39 | 40 | return ( 41 |
51 | 52 |
53 | ); 54 | } 55 | 56 | let settings = { 57 | infinite: true, 58 | speed: 500, 59 | slidesToShow: 3, 60 | slidesToScroll: 3, 61 | nextArrow: , 62 | prevArrow: , 63 | responsive: [ 64 | { 65 | breakpoint: 1024, 66 | settings: { 67 | slidesToShow: 3, 68 | slidesToScroll: 3, 69 | infinite: true, 70 | dots: true 71 | } 72 | }, 73 | { 74 | breakpoint: 600, 75 | settings: { 76 | slidesToShow: 2, 77 | slidesToScroll: 2, 78 | initialSlide: 2 79 | } 80 | }, 81 | { 82 | breakpoint: 480, 83 | settings: { 84 | slidesToShow: 1, 85 | slidesToScroll: 1 86 | } 87 | } 88 | ] 89 | }; 90 | return ( 91 | 92 |
93 |

Explore Our Comprehensive Guides for More Details

94 |
95 | 104 | {packag && 105 | packag.map((ele) => ( 106 | 107 | 108 | 109 |

{ele.title}

110 | 111 | 112 | ))} 113 | 114 | 115 | ); 116 | } 117 | 118 | export default Comprehensive 119 | 120 | 121 | 122 | const WebseriesWrapper = styled.div` 123 | margin-top:50px; 124 | margin-bottom:50px; 125 | h1 { 126 | margin-bottom: 8px; 127 | font-size: 28px; 128 | font-weight: 700; 129 | line-height: 30.8px; 130 | } 131 | 132 | 133 | `; 134 | 135 | const WeseriesCard = styled.div` 136 | padding:0px 5px; 137 | margin-top:10px; 138 | 139 | 140 | img { 141 | align-items:center; 142 | height:210px; 143 | object-fit: cover; 144 | object-position:center; 145 | width:100%; 146 | border-radius: 4px; 147 | 148 | } 149 | h3{ 150 | font-weight:700; 151 | margin-bottom:8px; 152 | font-size:20px; 153 | } 154 | 155 | `; 156 | -------------------------------------------------------------------------------- /my-app/src/beaches/Topbeach.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import axios from 'axios'; 3 | import "slick-carousel/slick/slick.css"; 4 | import "slick-carousel/slick/slick-theme.css"; 5 | import Slider from "react-slick"; 6 | import { IoIosArrowDropleft, IoIosArrowDropright } from "react-icons/io" 7 | import styled from "styled-components" 8 | const Topbeach = () => { 9 | const [topBeach, setTopBeach] = useState([]); 10 | useEffect(() => { 11 | axios 12 | .get("https://persian-blue-hen-slip.cyclic.app/india") 13 | .then((res) => { 14 | setTopBeach(res.data); 15 | }); 16 | }, []); 17 | 18 | function SampleNextArrow(props) { 19 | 20 | const { onClick } = props; 21 | return ( 22 |
23 | 28 |
29 | 30 | 31 | ); 32 | } 33 | 34 | function SamplePrevArrow(props) { 35 | const { onClick } = props; 36 | 37 | return ( 38 |
39 | 44 |
45 | 46 | 47 | ); 48 | } 49 | 50 | let settings = { 51 | infinite: true, 52 | speed: 500, 53 | slidesToShow: 3, 54 | slidesToScroll: 3, 55 | nextArrow: , 56 | prevArrow: , 57 | responsive: [ 58 | { 59 | breakpoint: 1024, 60 | settings: { 61 | slidesToShow: 3, 62 | slidesToScroll: 3, 63 | infinite: true, 64 | dots: true 65 | } 66 | }, 67 | { 68 | breakpoint: 600, 69 | settings: { 70 | slidesToShow: 2, 71 | slidesToScroll: 2, 72 | initialSlide: 2 73 | } 74 | }, 75 | { 76 | breakpoint: 480, 77 | settings: { 78 | slidesToShow: 1, 79 | slidesToScroll: 1 80 | } 81 | } 82 | ] 83 | }; 84 | 85 | return ( 86 | 87 |
88 |

Top Beach Properties You Need to Experience This Year

89 | 90 |
91 | 92 | 93 | { 94 | topBeach && topBeach.map((ele) => 95 | 96 |
{ele.prop}
97 |

{ele.title}

98 |
By{ele.by}
99 | ) 100 | } 101 | 102 | 103 | 104 | ) 105 | } 106 | 107 | export default Topbeach 108 | 109 | 110 | 111 | 112 | export const WebseriesWrapper = styled.div` 113 | margin-top:50px; 114 | margin-bottom:50px; 115 | h1 { 116 | margin-bottom: 8px; 117 | font-size: 28px; 118 | font-weight: 700; 119 | line-height: 30.8px; 120 | } 121 | text { 122 | font-weight: 400; 123 | font-size: 16px; 124 | line-height: 22px; 125 | } 126 | 127 | span { 128 | color: black; 129 | margin-right: 2px; 130 | } 131 | 132 | h5 { 133 | color: rgb(56, 159, 221); 134 | line-height:15px; 135 | 136 | } 137 | h6{ 138 | color:rgb(255,145,108); 139 | font-size:14px; 140 | margin-top:4px; 141 | } 142 | `; 143 | 144 | export const WeseriesCard = styled.div` 145 | padding:0px 5px; 146 | margin-top:10px; 147 | 148 | 149 | img { 150 | align-items:center; 151 | height:210px; 152 | object-fit: cover; 153 | object-position:center; 154 | width:100%; 155 | border-radius: 4px; 156 | 157 | } 158 | h3{ 159 | font-weight:700; 160 | margin-bottom:8px; 161 | } 162 | h5{ 163 | font-size:16px; 164 | } 165 | `; 166 | -------------------------------------------------------------------------------- /my-app/src/Navbar/Homepage.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | #banner { 7 | width: 100%; 8 | height: 340px; 9 | } 10 | #banner + div{ 11 | width: 40%; 12 | left: 30%; 13 | top:35%; 14 | /* border: 1px solid red; */ 15 | text-align: center; 16 | } 17 | #luftansa { 18 | /* border: 1px solid; */ 19 | height: auto; 20 | width: 55%; 21 | margin: auto; 22 | margin-bottom: 5%; 23 | } 24 | 25 | /* Home1 */ 26 | 27 | #home1_A { 28 | display: grid; 29 | grid-template-columns: repeat(4, 1fr); 30 | margin: auto; 31 | /* border: 1px solid; */ 32 | gap: 10px; 33 | align-items: center; 34 | width: 76%; 35 | } 36 | 37 | #home1_A img { 38 | height: 75px; 39 | /* border: 1px solid silver; */ 40 | } 41 | 42 | /* Tourism */ 43 | 44 | #tour-flex { 45 | display: grid; 46 | width: 75%; 47 | margin: auto; 48 | /* border: 1px solid; */ 49 | grid-template-columns: repeat(4, 1fr); 50 | gap: 20px; 51 | } 52 | 53 | #tour-flex > div { 54 | /* width: 23%; */ 55 | /* border: 1px solid; */ 56 | display: flex; 57 | flex-direction: column; 58 | align-items: center; 59 | } 60 | 61 | #tour-flex div img { 62 | height: 180px; 63 | border-radius: 10px; 64 | } 65 | 66 | #tour-flex div h4 { 67 | padding-left: 5px; 68 | padding-right: 0px; 69 | } 70 | 71 | /* Traveller */ 72 | 73 | #traveller-flex { 74 | /* border: 1px solid; */ 75 | display: grid; 76 | grid-template-columns: repeat(4, 1fr); 77 | width: 90%; 78 | margin: auto; 79 | gap: 20px; 80 | margin-bottom: 70px; 81 | } 82 | 83 | #traveller-flex > div { 84 | /* border: 1px solid silver; */ 85 | border-radius: 5px; 86 | /* padding: 10px; */ 87 | } 88 | 89 | #traveller-flex > div img { 90 | border-radius: 10px; 91 | height: 180px; 92 | width: 100%; 93 | } 94 | 95 | #traveller-flex > div > h4 { 96 | font-size: 17px; 97 | } 98 | 99 | /* Spotlight */ 100 | 101 | #spot-flex { 102 | width: 75%; 103 | margin: auto; 104 | margin-bottom: 70px; 105 | } 106 | 107 | #spot-flex-2 { 108 | display: grid; 109 | grid-template-columns: repeat(3, 1fr); 110 | grid-template-rows: auto; 111 | gap: 30px; 112 | } 113 | 114 | 115 | 116 | #spot-flex-2 div img { 117 | border-radius: 5px; 118 | height: 95%; 119 | width: 100%; 120 | } 121 | 122 | /* Carousel */ 123 | 124 | .carousel-wrapper { 125 | width: 100%; 126 | height: auto; 127 | } 128 | 129 | .content-div img { 130 | height: 170px; 131 | width: 100%; 132 | border-radius: 5px; 133 | } 134 | 135 | #carousel-parent { 136 | width: 90%; 137 | margin: auto; 138 | height: auto; 139 | } 140 | 141 | .content-div > h5 { 142 | font-size: 13px; 143 | color: rgb(215, 143, 9); 144 | } 145 | 146 | .content-div > h4 { 147 | font-size: 18px; 148 | color: rgba(0, 0, 0, 0.8); 149 | font-weight: 600; 150 | } 151 | 152 | 153 | .carousel-wrapper-country img { 154 | height: 320px; 155 | border-radius: 5px; 156 | 157 | } 158 | 159 | .rec.rec-arrow { 160 | background-color: white; 161 | font-size: 14px; 162 | display: block; 163 | margin: auto; 164 | /* width: 10px; */ 165 | /* border: 1px solid red; */ 166 | } 167 | 168 | .rec.rec-arrow:hover { 169 | background: rgb(164, 209, 249); 170 | } 171 | 172 | #suggestion::-webkit-scrollbar { 173 | display: none; 174 | } 175 | 176 | @media all and (min-width: 100px) and (max-width: 500px) { 177 | #home1_A, 178 | #spot-flex-2, 179 | #tour-flex, 180 | #traveller-flex { 181 | grid-template-columns: repeat(1, 1fr); 182 | grid-template-rows: auto; 183 | } 184 | 185 | .content-div > h5 { 186 | font-size: 10px; 187 | } 188 | 189 | .content-div > h4 { 190 | font-size: 12px; 191 | } 192 | 193 | #carousel-parent > h3{ 194 | font-size: 20px; 195 | margin-bottom: 10px; 196 | } 197 | 198 | /* #spot-flex img{ 199 | 200 | } */ 201 | 202 | #middlepart_p{ 203 | font-size: 16px; 204 | } 205 | #banner + div{ 206 | width: 90%; 207 | left: 5%; 208 | top:35%; 209 | } 210 | } 211 | -------------------------------------------------------------------------------- /my-app/src/AdminPanal/addProduct.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | Box, 3 | Button, 4 | Flex, 5 | FormControl, 6 | FormLabel, 7 | Input, 8 | Select, 9 | useToast, 10 | } from "@chakra-ui/react"; 11 | import { useContext, useState } from "react"; 12 | import axios from "axios"; 13 | import { useEffect } from "react"; 14 | import { ShowContext } from "../Context/ShowContext"; 15 | 16 | const AddProdct = () => { 17 | const intProductData = { 18 | image: "", 19 | type: "", 20 | title: "", 21 | location: "", 22 | button: "", 23 | price: ``, 24 | person: "/person", 25 | quotes: "Get Quotes", 26 | brand_logo: "", 27 | brand_name: "", 28 | }; 29 | 30 | const postPackages = async (url, data) => { 31 | try { 32 | return await axios.post(url, data); 33 | } catch (error) { 34 | console.log(error); 35 | } 36 | }; 37 | 38 | const [form, setForm] = useState(intProductData); 39 | const toast = useToast(); 40 | 41 | const handleChange = (e) => { 42 | const { name, value } = e.target; 43 | setForm({ ...form, [name]: value }); 44 | }; 45 | 46 | const handleClick = () => { 47 | if ( 48 | form.image && 49 | form.type && 50 | form.title && 51 | form.location && 52 | form.button && 53 | form.price && 54 | form.brand_logo && 55 | form.brand_name 56 | ) { 57 | postPackages("https://fantastic-lab-coat-moth.cyclic.app/Package", form) 58 | .then( 59 | () => ( 60 | setForm(intProductData), 61 | toast({ 62 | title: "Package Added.", 63 | status: "success", 64 | duration: 9000, 65 | isClosable: true, 66 | }) 67 | ) 68 | ) 69 | .catch(() => setForm(intProductData)); 70 | } 71 | }; 72 | 73 | return ( 74 | 75 | 76 | 77 | Product Name : 78 | 79 | Package Image Link : 80 | 86 | Product Type : 87 | 88 | Product Location : 89 | 94 | Product Validity : 95 | 111 | Product Price : 112 | 118 | Product Brand Logo : 119 | 125 | Product Brand Name : 126 | 131 | 132 | 133 | 141 | 142 | 143 | 144 | ); 145 | }; 146 | 147 | export default AddProdct; 148 | -------------------------------------------------------------------------------- /my-app/src/Pankaj/Plan/Plan.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "slick-carousel/slick/slick.css"; 3 | import "slick-carousel/slick/slick-theme.css"; 4 | import Slider from "react-slick"; 5 | import styles from "./Plan.module.css"; 6 | 7 | function SampleNextArrow(props) { 8 | const { className, style, onClick } = props; 9 | return ( 10 |
15 | ); 16 | } 17 | 18 | function SamplePrevArrow(props) { 19 | const { className, style, onClick } = props; 20 | return ( 21 |
31 | ); 32 | } 33 | 34 | export const Plan = () => { 35 | var settings = { 36 | dots: false, 37 | infinite: false, 38 | speed: 500, 39 | slidesToShow: 4, 40 | slidesToScroll: 4, 41 | initialSlide: 0, 42 | nextArrow: , 43 | prevArrow: , 44 | responsive: [ 45 | { 46 | breakpoint: 1024, 47 | settings: { 48 | slidesToShow: 3, 49 | slidesToScroll: 3, 50 | infinite: true, 51 | dots: true, 52 | }, 53 | }, 54 | { 55 | breakpoint: 600, 56 | settings: { 57 | slidesToShow: 2, 58 | slidesToScroll: 2, 59 | initialSlide: 2, 60 | }, 61 | }, 62 | { 63 | breakpoint: 480, 64 | settings: { 65 | slidesToShow: 1, 66 | slidesToScroll: 1, 67 | }, 68 | }, 69 | ], 70 | }; 71 | return ( 72 |
73 |
74 | 75 |
76 |
77 | 78 |
79 |
80 | 81 |
82 |
83 | 87 |
88 |
89 | 90 |
91 |
92 | 96 |
97 |
98 | 99 |
100 |
101 | 105 |
106 |
107 | 108 |
109 |
110 | 114 |
115 |
116 | 117 |
118 |
119 | 123 |
124 |
125 | 126 |
127 |
128 | 132 |
133 |
134 |
135 |
136 | 140 |
141 |
142 | 143 |
144 |
145 | ); 146 | }; 147 | -------------------------------------------------------------------------------- /my-app/src/Navbar/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | Avatar, 3 | Box, 4 | Button, 5 | Heading, 6 | Image, 7 | Input, 8 | Menu, 9 | MenuButton, 10 | MenuItem, 11 | MenuList, 12 | } from "@chakra-ui/react"; 13 | import { useEffect } from "react"; 14 | import { useContext } from "react"; 15 | import { useState } from "react"; 16 | import { Link, NavLink } from "react-router-dom"; 17 | import { ShowContext } from "../Context/ShowContext"; 18 | import styles from "./Navbar.module.css"; 19 | import image from "../Logo/pro.webp"; 20 | import Login from "../Components/Login"; 21 | import { signOut, onAuthStateChanged } from "firebase/auth"; 22 | import { auth } from "../firebase-config"; 23 | import AdminLogin from "../AdminPanal/adminLogin"; 24 | 25 | export function Navbar() { 26 | const [color, setColor] = useState(false); 27 | const { show, setShow } = useContext(ShowContext); 28 | const [avatar, setAvatar] = useState(""); 29 | const [avatarName, setAvatarName] = useState(""); 30 | const [email, setEmail] = useState(""); 31 | const { setIsAuth } = useContext(ShowContext); 32 | 33 | onAuthStateChanged(auth, (currentUser) => { 34 | setEmail(currentUser.email); 35 | setAvatarName(currentUser.displayName); 36 | setAvatar(currentUser.photoURL); 37 | setIsAuth(true); 38 | }); 39 | 40 | let name = email.split("@"); 41 | name = name[0].toUpperCase(); 42 | 43 | function logoutUser() { 44 | signOut(auth).then((res) => { 45 | setEmail(""); 46 | setAvatarName(""); 47 | setAvatar(""); 48 | setIsAuth(false); 49 | }); 50 | } 51 | 52 | const changeColor = () => { 53 | if (window.scrollY > 100) { 54 | setShow(true); 55 | } else { 56 | setShow(false); 57 | } 58 | }; 59 | 60 | useEffect(() => { 61 | window.addEventListener("scroll", changeColor); 62 | }, []); 63 | return ( 64 | 72 | 73 | 74 | 75 | {/* https://cdn1.tripoto.com/assets/2.9/img/logo/tripoto.svg */} 76 | 77 | 78 | 79 | {show && ( 80 | 89 | )} 90 | 91 | 92 | 93 | Inspiration 94 | 95 | 96 | Visit Singapore 97 | 98 | 99 | Beaches 100 | 101 | Mountain 102 | Heritage 103 | Weekend Guide 104 | Upcoming Festivals 105 | Honeymoon Packages 106 | Wildlife Tourism 107 | Roadlife Trips 108 | Getaways Guide 109 | Luxury Travel 110 | Explore More 111 | 112 | 113 | 114 | 115 | Packages 116 | 117 | Publish trip 118 | 119 | 120 | Create New 121 | 122 | 123 | Upload phtos/videos 124 | 125 | Import Blog 126 | 127 | 128 | 129 | {avatarName || name ? ( 130 |
131 | {" "} 132 | {" "} 133 | {avatarName || name} 134 | {" "} 138 |
139 | ) : ( 140 | 141 | )} 142 | 143 | 144 | 145 | ); 146 | } 147 | -------------------------------------------------------------------------------- /my-app/src/Components/Login.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | createUserWithEmailAndPassword, 4 | signInWithEmailAndPassword, 5 | GoogleAuthProvider, 6 | signInWithPopup, 7 | } from "firebase/auth"; 8 | import { auth } from "../firebase-config"; 9 | import { useContext } from "react"; 10 | import { useState } from "react"; 11 | import { Navigate } from "react-router-dom"; 12 | import { ShowContext } from "../Context/ShowContext"; 13 | import { Link } from "react-router-dom"; 14 | import { FcGoogle } from "react-icons/fc"; 15 | import { FaFacebookF } from "react-icons/fa"; 16 | import { 17 | Modal, 18 | ModalOverlay, 19 | ModalContent, 20 | ModalHeader, 21 | ModalFooter, 22 | ModalBody, 23 | ModalCloseButton, 24 | FormControl, 25 | Button, 26 | FormLabel, 27 | useDisclosure, 28 | Input, 29 | Box, 30 | } from "@chakra-ui/react"; 31 | 32 | import Signup from "./Signup"; 33 | 34 | function Login() { 35 | //this is for popup window 36 | const { isOpen, onOpen, onClose } = useDisclosure(); 37 | 38 | //this is login input refrence 39 | const initialRef = React.useRef(null); 40 | const finalRef = React.useRef(null); 41 | 42 | //this contain email and password of user 43 | const [registerEmail, setRegisterEmail] = useState(""); 44 | const [registerPassword, setRegisterPassword] = useState(""); 45 | 46 | //for authentication 47 | const { isAuth, setIsAuth } = useContext(ShowContext); 48 | 49 | const provider = new GoogleAuthProvider(); 50 | 51 | //this is a login function 52 | 53 | const signInWithGoogle = () => { 54 | signInWithPopup(auth, provider) 55 | .then((res) => { 56 | setIsAuth(true); 57 | }) 58 | .catch((error) => { 59 | alert("Something Went wrong"); 60 | }); 61 | }; 62 | 63 | const handleSubmit = () => { 64 | signInWithEmailAndPassword(auth, registerEmail, registerPassword) 65 | .then((res) => { 66 | setIsAuth(true); 67 | alert("LogIn Successful !"); 68 | }) 69 | .then((error) => {}); 70 | }; 71 | 72 | return ( 73 | <> 74 | 75 | Log in 76 | 77 | 78 | 85 | 86 | 87 | Log in 88 | 103 | 104 | 119 | 120 | OR 121 | 122 | 123 | 124 | 125 | Email 126 | setRegisterEmail(e.target.value)} 132 | /> 133 | 134 | 135 | 136 | Password 137 | setRegisterPassword(e.target.value)} 142 | /> 143 | 144 | 145 | 146 | 147 | 155 | 156 | 165 | Don't have an account? 166 | 167 |
168 | 169 | 170 | 171 | ); 172 | } 173 | 174 | export default Login; 175 | -------------------------------------------------------------------------------- /my-app/src/Packages/confirmButton.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | AlertDialog, 3 | AlertDialogBody, 4 | AlertDialogCloseButton, 5 | AlertDialogContent, 6 | AlertDialogFooter, 7 | AlertDialogHeader, 8 | AlertDialogOverlay, 9 | Box, 10 | Button, 11 | Center, 12 | Square, 13 | useDisclosure, 14 | useToast, 15 | } from "@chakra-ui/react"; 16 | import axios from "axios"; 17 | import React, { useEffect } from "react"; 18 | import { useState } from "react"; 19 | import { FaArrowCircleRight } from "react-icons/fa"; 20 | import { useNavigate } from "react-router-dom"; 21 | 22 | const ConfirmButton = ({ data, formData }) => { 23 | const { isOpen, onOpen, onClose } = useDisclosure(); 24 | const cancelRef = React.useRef(); 25 | const navigate = useNavigate(); 26 | const toast = useToast(); 27 | 28 | const pro = data.id; 29 | 30 | const intUserDetail = { 31 | name: formData.name, 32 | email: formData.email, 33 | contect: formData.number, 34 | city: formData.city, 35 | people: formData.people, 36 | children: formData.children, 37 | room: formData.room, 38 | date: formData.date, 39 | packegeID: pro, 40 | }; 41 | 42 | const orderdone = async (url, data) => { 43 | try { 44 | return await axios.post(url, data); 45 | } catch (error) { 46 | console.log(error); 47 | } 48 | }; 49 | 50 | const [userData, setUserData] = useState(null); 51 | 52 | const handleClickCofirm = () => { 53 | setUserData({ ...intUserDetail, packegeID: pro }); 54 | }; 55 | 56 | const handleClickonYes = () => { 57 | orderdone(`https://powerful-lingerie-fawn.cyclic.app/booking`, userData) 58 | .then((e) => console.log(e)) 59 | .then((e) => 60 | toast({ 61 | title: "Package Added.", 62 | status: "success", 63 | duration: 9000, 64 | isClosable: true, 65 | }) 66 | ) 67 | .then(() => navigate("/packages")) 68 | .catch((e) => console.log(e)); 69 | }; 70 | 71 | return ( 72 | <> 73 | 93 | 100 | 101 | 102 | 103 | 104 | {formData.name} Please Check Your Details 105 | 106 | 107 | 108 | 109 | Name : 110 | {formData.name} 111 | 112 | 113 | Email : 114 | {formData.email} 115 | 116 | 117 | Number : 118 | 119 | {formData.number} 120 | 121 | 122 | City : 123 | 124 | {formData.city} 125 | 126 | 127 | Number of Rooms : 128 | 129 | {formData.room} 130 | 131 | 132 | Number of Guest : 133 | 134 | {formData.people} 135 | 136 | 137 | Number of Children : 138 | 139 | {formData.children} 140 | 141 | 142 | Check In Date : 143 | {formData.date} 144 | 145 | 146 | 147 | 150 | 159 | 160 | 161 | 162 | 163 | ); 164 | }; 165 | 166 | export default ConfirmButton; 167 | -------------------------------------------------------------------------------- /my-app/src/Home_Page_Component/Find_best_place.jsx: -------------------------------------------------------------------------------- 1 | import { Grid } from "@chakra-ui/react"; 2 | import { Image, Box, Text, Link, Heading } from "@chakra-ui/react"; 3 | function Find_best_place() { 4 | const outer_div = { 5 | width: "85%", 6 | margin: "auto", 7 | marginTop: "50px", 8 | }; 9 | 10 | // const inner_div = { 11 | // display: "flex", 12 | // }; 13 | 14 | return ( 15 |
16 | 21 | 22 | Dan 29 | 30 | 10 Best Places To Experience The Chills This Winter 31 | 32 | 33 | By{" "} 34 | 35 | Kadambari Bhatte (curlytravelmess) 36 | 37 | 38 | 39 | 40 | Dan 47 | 48 | 10 Best Places To Experience The Chills This Winter 49 | 50 | 51 | By{" "} 52 | 53 | Kadambari Bhatte (curlytravelmess) 54 | 55 | 56 | 57 | 58 | Dan 65 | 66 | 10 Best Places To Experience The Chills This Winter 67 | 68 | 69 | By{" "} 70 | 71 | Kadambari Bhatte (curlytravelmess) 72 | 73 | 74 | 75 | 76 | Dan 83 | 84 | 10 Best Places To Experience The Chills This Winter 85 | 86 | 87 | By{" "} 88 | 89 | Kadambari Bhatte (curlytravelmess) 90 | 91 | 92 | 93 | 94 | Dan 101 | 102 | 10 Best Places To Experience The Chills This Winter 103 | 104 | 105 | By{" "} 106 | 107 | Kadambari Bhatte (curlytravelmess) 108 | 109 | 110 | 111 | 112 | Dan 119 | 120 | 10 Best Places To Experience The Chills This Winter 121 | 122 | 123 | By{" "} 124 | 125 | Kadambari Bhatte (curlytravelmess) 126 | 127 | 128 | 129 | 130 | Dan 137 | 138 | 10 Best Places To Experience The Chills This Winter 139 | 140 | 141 | By{" "} 142 | 143 | Kadambari Bhatte (curlytravelmess) 144 | 145 | 146 | 147 | 148 | Dan 155 | 156 | 10 Best Places To Experience The Chills This Winter 157 | 158 | 159 | By{" "} 160 | 161 | Kadambari Bhatte (curlytravelmess) 162 | 163 | 164 | 165 | 166 |
167 | ); 168 | } 169 | 170 | export default Find_best_place; 171 | -------------------------------------------------------------------------------- /my-app/src/Pankaj/Watch/Watch.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "slick-carousel/slick/slick.css"; 3 | import "slick-carousel/slick/slick-theme.css"; 4 | import Slider from "react-slick"; 5 | import styles from "./Watch.module.css"; 6 | 7 | function SampleNextArrow(props) { 8 | const { className, style, onClick } = props; 9 | return ( 10 |
15 | ); 16 | } 17 | 18 | function SamplePrevArrow(props) { 19 | const { className, style, onClick } = props; 20 | return ( 21 |
31 | ); 32 | } 33 | 34 | export const Watch = () => { 35 | var settings = { 36 | dots: false, 37 | infinite: false, 38 | speed: 500, 39 | slidesToShow: 4, 40 | slidesToScroll: 4, 41 | initialSlide: 0, 42 | nextArrow: , 43 | prevArrow: , 44 | responsive: [ 45 | { 46 | breakpoint: 1024, 47 | settings: { 48 | slidesToShow: 3, 49 | slidesToScroll: 3, 50 | infinite: true, 51 | dots: true, 52 | }, 53 | }, 54 | { 55 | breakpoint: 600, 56 | settings: { 57 | slidesToShow: 2, 58 | slidesToScroll: 2, 59 | initialSlide: 2, 60 | }, 61 | }, 62 | { 63 | breakpoint: 480, 64 | settings: { 65 | slidesToShow: 1, 66 | slidesToScroll: 1, 67 | }, 68 | }, 69 | ], 70 | }; 71 | return ( 72 |
73 |
74 | 75 |
76 |
77 | 81 |
82 | 83 |
84 | Best Weekend Getaways From Mumbai Under 250 Kms 85 |
86 |
87 | 88 | By 89 | {" "} 90 | 91 | Namita Mittal 92 | 93 |
94 |
95 | 96 |
97 |
98 | 102 |
103 | 104 |
105 | Narendra Bhawan:Palace Hotel In Bikaner 106 |
107 |
108 | 109 | By 110 | {" "} 111 | 112 | namita Mittal 113 | 114 |
115 |
116 | 117 |
118 |
119 | 123 |
124 | 125 |
126 | 5-Day Jaipur Itinerary To See The City Of Maharajas 127 |
128 |
129 | 130 | By 131 | {" "} 132 | 133 | Nimita Mittal 134 | 135 |
136 |
137 | 138 |
139 |
140 | 144 |
145 | 146 |
147 | 5 Beautiful Places In Delhi That Are Seriously Underrated 148 |
149 |
150 | 151 | By 152 | {" "} 153 | 154 | Nimita Mittal 155 | 156 |
157 |
158 | 159 |
160 |
161 | 165 |
166 | 167 |
10 Best Budget Hotels InDia
168 |
169 | By{" "} 170 | Nimita Mittal 171 |
172 |
173 | 174 |
175 |
176 | ); 177 | }; 178 | -------------------------------------------------------------------------------- /my-app/src/Packages/checkout.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | Box, 3 | Button, 4 | Flex, 5 | Heading, 6 | Input, 7 | Select, 8 | Spacer, 9 | } from "@chakra-ui/react"; 10 | import { useState } from "react"; 11 | import { FaArrowCircleRight, FaRupeeSign } from "react-icons/fa"; 12 | import ConfirmButton from "./confirmButton"; 13 | 14 | const Checkout = ({ data }) => { 15 | const intData = { 16 | email: "", 17 | name: "", 18 | number: "", 19 | city: "", 20 | people: "1", 21 | children: "0", 22 | room: "1", 23 | date: "", 24 | }; 25 | 26 | const [formData, setFormData] = useState(intData); 27 | 28 | const handleChange = (e) => { 29 | const { name, value } = e.target; 30 | setFormData({ ...formData, [name]: value }); 31 | }; 32 | 33 | let numberinprice = ""; 34 | 35 | if (data.price) { 36 | { 37 | for (let i = 0; i < data.price.length; i++) { 38 | if ( 39 | data.price[i] == "1" || 40 | data.price[i] == "2" || 41 | data.price[i] == "3" || 42 | data.price[i] == "4" || 43 | data.price[i] == "5" || 44 | data.price[i] == "6" || 45 | data.price[i] == "7" || 46 | data.price[i] == "8" || 47 | data.price[i] == "9" || 48 | data.price[i] == "0" 49 | ) { 50 | numberinprice = numberinprice + data.price[i]; 51 | } 52 | } 53 | } 54 | } 55 | 56 | let x = +formData.people; 57 | let y = +numberinprice; 58 | 59 | let total = y * x; 60 | 61 | return ( 62 | 70 | 77 | Enter Your Details and Proceed To Book 78 | 79 | 85 | 93 | 100 | 108 | 115 | 130 | 145 | 159 | 169 | 170 | 177 | Amount: 178 | 179 | 180 | {total} 181 | 182 | 183 | Taxes and discounts are calculated at checkout. 184 | {formData.name.length == 0 || 185 | formData.email.length == 0 || 186 | formData.number.length == 0 || 187 | formData.city.length == 0 || 188 | formData.people.length == 0 || 189 | formData.date.length == 0 ? ( 190 | 191 | Fill All Crediantial To Enable Button 192 | 193 | ) : null} 194 | 195 | 196 | I accept the Terms of Use and Privacy Policy of Tripoto. 197 | 198 | 199 | 200 | ); 201 | }; 202 | 203 | export default Checkout; 204 | -------------------------------------------------------------------------------- /my-app/src/Components/Signup.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | Box, 4 | Input, 5 | Modal, 6 | ModalCloseButton, 7 | ModalOverlay, 8 | ModalContent, 9 | ModalHeader, 10 | ModalBody, 11 | ModalFooter, 12 | useDisclosure, 13 | FormControl, 14 | FormLabel, 15 | Button, 16 | } from "@chakra-ui/react"; 17 | import { useState } from "react"; 18 | import { auth } from "../firebase-config"; 19 | import { useContext } from "react"; 20 | import { ShowContext } from "../Context/ShowContext"; 21 | import { 22 | createUserWithEmailAndPassword, 23 | GoogleAuthProvider, 24 | onAuthStateChanged, 25 | signInWithPopup, 26 | updateCurrentUser, 27 | signOut, 28 | } from "firebase/auth"; 29 | import { FcGoogle } from "react-icons/fc"; 30 | import { FaFacebookF } from "react-icons/fa"; 31 | import Login from "./Login"; 32 | import { Navigate } from "react-router-dom"; 33 | 34 | const Signup = () => { 35 | //this is for popup window 36 | const { isOpen, onOpen, onClose } = useDisclosure(); 37 | 38 | //this is login input refrence 39 | const initialRef = React.useRef(null); 40 | const finalRef = React.useRef(null); 41 | 42 | //this contain email, password and name of users 43 | const [yourEmail, setYourEmail] = useState(""); 44 | const [yourPassword, setYourPassword] = useState(""); 45 | const [yourName, setYourName] = useState(""); 46 | 47 | //this contain loding and error 48 | const [loading, setloading] = useState(false); 49 | const [error, setError] = useState(""); 50 | 51 | //for authentication 52 | const { isAuth, setIsAuth } = useContext(ShowContext); 53 | 54 | //This Is a signup function 55 | 56 | const handleSubmit = (e) => { 57 | e.preventDefault(); 58 | setloading(true); 59 | createUserWithEmailAndPassword(auth, yourEmail, yourPassword) 60 | .then((res) => { 61 | setIsAuth(true); 62 | console.log(res); 63 | alert("Signup Successful !"); 64 | ; 65 | setloading(false); 66 | }) 67 | .catch((err) => {}); 68 | }; 69 | 70 | return ( 71 | <> 72 | 73 | Sign Up 74 | 75 | 82 | 83 | 84 | Sign Up 85 | 100 | 101 | 115 | 116 | OR 117 | 118 | 119 | 120 | 121 | 122 | 123 | Full Name 124 | setYourName(e.target.value)} 129 | /> 130 | 131 | 132 | 133 | Enter Email Address 134 | setYourEmail(e.target.value)} 139 | /> 140 | 141 | 142 | 143 | Enter Password 144 | setYourPassword(e.target.value)} 149 | /> 150 | 151 | 152 | 153 | 156 | 157 | 167 | By signing up, you agree to R.P.S.N vaccation's terms and conditions 168 | and privacy policy. 169 | 170 |
171 | 180 | Already registered? 181 | 182 |
183 | 184 | 185 | 186 | ); 187 | }; 188 | 189 | export default Signup; 190 | -------------------------------------------------------------------------------- /my-app/src/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Image, VStack } from '@chakra-ui/react' 2 | import React from 'react' 3 | import { FaInstagram, FaFacebookSquare, FaTwitterSquare, FaYoutube, FaPinterestSquare, FaSatelliteDish } from "react-icons/fa" 4 | import style from "./Footer.module.css" 5 | import { Link } from 'react-router-dom' 6 | function Footer() { 7 | return ( 8 |
9 |
10 |
11 | 12 | 13 | 14 | 15 | India's Largest Travel Community 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | About Tripoto 41 | How It Works 42 | 43 | FAQ’s 44 | 45 | 46 | Privacy Policy 47 | 48 | 49 | Terms & Conditions 50 | 51 | Careers 52 | Contact Us 53 | 54 | 55 | 56 | 57 | Products 58 | Tour Packages 59 | Travel Guides 60 | Trips & Itineraries 61 | Weekend Getaways 62 | Places to Visit 63 | Other Travel Categories 64 | Tripoto Forum 65 | Honeymoon Packages 66 | 67 | 68 | 69 | 70 | Important Travel Links 71 | Goa Tourism 72 | Dubai Tourism 73 | Singapore Tourism 74 | Kerala Tourism 75 | Manali Tourism 76 | Bali Tourism 77 | Sri Lanka Tourism 78 | Honeymoon Destinations In India 79 | 80 | 81 | 82 | 83 | Partner Programs 84 | Buy Travel Leads 85 | Partner With Us 86 | Earn Credits 87 | Get Paid To Travel 88 | Import Blog To Itinerary 89 | 90 | 91 | 92 |
93 | ) 94 | } 95 | 96 | export default Footer -------------------------------------------------------------------------------- /my-app/src/Pankaj/Check/Check.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "slick-carousel/slick/slick.css"; 3 | import "slick-carousel/slick/slick-theme.css"; 4 | import Slider from "react-slick"; 5 | import styles from "./Check.module.css"; 6 | 7 | function SampleNextArrow(props) { 8 | const { className, style, onClick } = props; 9 | return ( 10 |
15 | ); 16 | } 17 | 18 | function SamplePrevArrow(props) { 19 | const { className, style, onClick } = props; 20 | return ( 21 |
31 | ); 32 | } 33 | 34 | export const Check = () => { 35 | var settings = { 36 | dots: false, 37 | infinite: false, 38 | speed: 500, 39 | slidesToShow: 4, 40 | slidesToScroll: 4, 41 | initialSlide: 0, 42 | nextArrow: , 43 | prevArrow: , 44 | responsive: [ 45 | { 46 | breakpoint: 1024, 47 | settings: { 48 | slidesToShow: 3, 49 | slidesToScroll: 3, 50 | infinite: true, 51 | dots: true, 52 | }, 53 | }, 54 | { 55 | breakpoint: 600, 56 | settings: { 57 | slidesToShow: 2, 58 | slidesToScroll: 2, 59 | initialSlide: 2, 60 | }, 61 | }, 62 | { 63 | breakpoint: 480, 64 | settings: { 65 | slidesToShow: 1, 66 | slidesToScroll: 1, 67 | }, 68 | }, 69 | ], 70 | }; 71 | return ( 72 |
73 |
74 | 75 |
76 |
77 | 81 |
82 |
BUDGET STAYS
83 |
84 | These Hostels In Udaipur Are Perfect For Every Backpacker 85 |
86 |
87 | By{" "} 88 | Adebte Dhayina 89 |
90 |
91 | 92 |
93 |
94 | 98 |
99 |
BUDGET STAYS
100 |
101 | This Lakeside Hostel Is The Perfect Escape From Delhi 102 |
103 |
104 | By{" "} 105 | Sonalika Debnath 106 |
107 |
108 | 109 |
110 |
111 | 115 |
116 |
BUDGET STAYS
117 |
118 | This Lakeside Hostel Is The Perfect Escape From Delhi 119 |
120 |
121 | By{" "} 122 | Arkko Banarjee 123 |
124 |
125 | 126 |
127 |
128 | 132 |
133 |
LUXURY STAYS
134 |
135 | Mayfair,Gangtok:Find Luxury At Sikkim's Capital City 136 |
137 |
138 | By{" "} 139 | Rashmi Sharma 140 |
141 |
142 | 143 |
144 |
145 | 149 |
150 |
LUXURY STAYS
151 |
152 | Bookmark These Luxury Stays In Karnataka 153 |
154 |
155 | By{" "} 156 | Aparajita 157 |
158 |
159 | 160 |
161 |
162 | 166 |
167 |
HOMESTAYS
168 |
169 | This Father-Son Duo Turned Their Farm IntoAHomestay 170 |
171 |
172 | By{" "} 173 | Divyangna(Nomadic_Missy) 174 |
175 |
176 | 177 |
178 |
179 | ); 180 | }; 181 | -------------------------------------------------------------------------------- /my-app/src/beaches/Package.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | import "slick-carousel/slick/slick.css"; 4 | import "slick-carousel/slick/slick-theme.css"; 5 | import Slider from "react-slick"; 6 | import { IoIosArrowDropleft, IoIosArrowDropright } from "react-icons/io"; 7 | import { FaMapMarkerAlt } from "react-icons/fa"; 8 | import styled from "styled-components"; 9 | 10 | const Package = () => { 11 | const [packag, setPackage] = useState([]); 12 | useEffect(() => { 13 | axios 14 | .get("https://persian-blue-hen-slip.cyclic.app/Package") 15 | .then((res) => { 16 | setPackage(res.data); 17 | console.log(res.data) 18 | }); 19 | }, []); 20 | 21 | function SampleNextArrow(props) { 22 | const { onClick } = props; 23 | return ( 24 |
34 | 35 |
36 | ); 37 | } 38 | 39 | function SamplePrevArrow(props) { 40 | const { onClick } = props; 41 | 42 | return ( 43 |
54 | 55 |
56 | ); 57 | } 58 | 59 | let settings = { 60 | infinite: true, 61 | speed: 500, 62 | slidesToShow: 4, 63 | slidesToScroll: 4, 64 | responsive: [ 65 | { 66 | breakpoint: 1024, 67 | settings: { 68 | slidesToShow: 3, 69 | slidesToScroll: 3, 70 | infinite: true, 71 | dots: true 72 | } 73 | }, 74 | { 75 | breakpoint: 600, 76 | settings: { 77 | slidesToShow: 2, 78 | slidesToScroll: 2, 79 | initialSlide: 2 80 | } 81 | }, 82 | { 83 | breakpoint: 480, 84 | settings: { 85 | slidesToShow: 1, 86 | slidesToScroll: 1 87 | } 88 | } 89 | ], 90 | nextArrow: , 91 | prevArrow: , 92 | }; 93 | 94 | return ( 95 | 96 |
97 |

Packages

98 |
99 | 108 | {packag && 109 | packag.map((ele) => ( 110 | 111 | 112 | {ele.type} 113 | {ele.title} 114 | 115 | 116 | 117 |
{ele.location}
118 | 119 | 120 | {ele.button} 121 | 122 | 123 | 124 | 125 | 126 |

{ele.price}

127 |
{ele.person}
128 | 129 | 130 | {ele.quotes} 131 | 132 | 133 | 134 | 135 |
136 | 137 | 138 |

{ele.brand_name}

139 | 140 | 141 | 142 | ))} 143 | 144 | 145 | ); 146 | }; 147 | 148 | export default Package; 149 | 150 | 151 | 152 | export const WebseriesWrapper = styled.div` 153 | margin-top:50px; 154 | margin-bottom:50px; 155 | h1 { 156 | margin-bottom: 8px; 157 | font-size: 28px; 158 | font-weight: 700; 159 | line-height: 30.8px; 160 | } 161 | `; 162 | 163 | export const WeseriesCard = styled.div` 164 | padding:0px 5px; 165 | margin-top:10px; 166 | 167 | 168 | img { 169 | align-items:center; 170 | height:210px; 171 | object-fit: cover; 172 | object-position:center; 173 | width:100%; 174 | border-radius: 4px; 175 | 176 | } 177 | 178 | `; 179 | 180 | export const PackageWrapper = styled.h5` 181 | color:rgb(53,147,145); 182 | font-size:14px; 183 | margin-top:5px; 184 | font-weight:bold; 185 | ` 186 | 187 | export const TitleWrapper = styled.h4` 188 | font-weight:700; 189 | font-size:18px; 190 | letter-spacing:0.6px; 191 | ` 192 | 193 | export const LoactionWrapper = styled.div` 194 | display:flex; 195 | justify-content: space-between; 196 | color:rgb(53,147,145); 197 | margin-top:5px; 198 | ` 199 | export const LogoWrapper = styled.div` 200 | display:flex; 201 | 202 | ` 203 | export const DaybuttonWrapper = styled.button` 204 | color:white; 205 | background-color: rgb(53,147,145); 206 | border-radius:13px; 207 | padding:3px 8px; 208 | font-size:13px; 209 | ` 210 | 211 | export const LogoImage = styled.div` 212 | display:flex; 213 | align-items: center; 214 | margin-top:10px; 215 | img{ 216 | width:30px; 217 | height:30px; 218 | border-radius: 50%; 219 | } 220 | h3{ 221 | padding-left:5px; 222 | font-size:14px; 223 | } 224 | ` 225 | 226 | export const PriceWrapper = styled.div` 227 | display:flex; 228 | justify-content: space-between; 229 | margin-top:15px; 230 | margin-bottom:10px; 231 | ` 232 | 233 | export const PersonWrapper = styled.div` 234 | display:flex; 235 | h3{ 236 | font-weight:bold; 237 | font-size:18px; 238 | } 239 | h6{ 240 | margin-left:4px; 241 | } 242 | ` 243 | export const Getquotes = styled.button` 244 | border:1px solid rgb(53,147,145); 245 | border-radius:6px; 246 | color:gray; 247 | padding:3px 7px; 248 | font-size:16px; 249 | 250 | ` 251 | -------------------------------------------------------------------------------- /my-app/src/Pankaj/Place/Place.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "slick-carousel/slick/slick.css"; 3 | import "slick-carousel/slick/slick-theme.css"; 4 | import Slider from "react-slick"; 5 | import styles from "./Place.module.css"; 6 | 7 | function SampleNextArrow(props) { 8 | const { className, style, onClick } = props; 9 | return ( 10 |
15 | ); 16 | } 17 | 18 | function SamplePrevArrow(props) { 19 | const { className, style, onClick } = props; 20 | return ( 21 |
31 | ); 32 | } 33 | 34 | export const Place = () => { 35 | var settings = { 36 | dots: false, 37 | infinite: false, 38 | speed: 500, 39 | slidesToShow: 4, 40 | slidesToScroll: 4, 41 | initialSlide: 0, 42 | nextArrow: , 43 | prevArrow: , 44 | responsive: [ 45 | { 46 | breakpoint: 1024, 47 | settings: { 48 | slidesToShow: 3, 49 | slidesToScroll: 3, 50 | infinite: true, 51 | dots: true, 52 | }, 53 | }, 54 | { 55 | breakpoint: 600, 56 | settings: { 57 | slidesToShow: 2, 58 | slidesToScroll: 2, 59 | initialSlide: 2, 60 | }, 61 | }, 62 | { 63 | breakpoint: 480, 64 | settings: { 65 | slidesToShow: 1, 66 | slidesToScroll: 1, 67 | }, 68 | }, 69 | ], 70 | }; 71 | return ( 72 |
73 |
74 | 75 |
76 |
77 | 81 |
82 | 83 |
84 | All You Need To Know About Thailand Visa For Indians 2022 85 |
86 |
87 | By{" "} 88 | Tripoto 89 |
90 |
91 | 92 |
93 |
94 | 98 |
99 | 100 |
101 | Add These Offbeat Places In Europe To Your List 102 |
103 |
104 | By{" "} 105 | Tanisha Mundra 106 |
107 |
108 | 109 |
110 |
111 | 115 |
116 | 117 |
118 | Travel Solo To These SE Asian Countries Under 25K INR 119 |
120 |
121 | By{" "} 122 | Disha kapkoti 123 |
124 |
125 | 126 |
127 |
128 | 132 |
133 | 134 |
135 | You Can Travel To Serbia From india Without A Visa 136 |
137 |
138 | By{" "} 139 | Tripoto 140 |
141 |
142 | 143 |
144 |
145 | 149 |
150 | 151 |
152 | Head To This Kalediosocpic Volanic Lake In Indionasia 153 |
154 |
155 | By{" "} 156 | Deepti Divya 157 |
158 |
159 | 160 |
161 |
162 | 166 |
167 | 168 |
169 | This Town In MP Will SoonGain "WILD" Popularity 170 |
171 |
172 | By{" "} 173 | Sujay Jamkhandi 174 |
175 |
176 | 177 |
178 |
179 | 183 |
184 | 185 |
186 | This August, Take A trip To Vietname Like Never Before 187 |
188 |
189 | By{" "} 190 | Adete Dhaiya 191 |
192 |
193 | 194 |
195 |
196 | ); 197 | }; 198 | -------------------------------------------------------------------------------- /my-app/src/Pankaj/Insportlight/Inspotlight.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "slick-carousel/slick/slick.css"; 3 | import "slick-carousel/slick/slick-theme.css"; 4 | import Slider from "react-slick"; 5 | import styles from "./Inspotlight.module.css"; 6 | import { useNavigate } from "react-router-dom"; 7 | 8 | function SampleNextArrow(props) { 9 | const { className, style, onClick } = props; 10 | return ( 11 |
16 | ); 17 | } 18 | 19 | function SamplePrevArrow(props) { 20 | const { className, style, onClick } = props; 21 | return ( 22 |
32 | ); 33 | } 34 | 35 | export const Inspotlight = () => { 36 | const navigate = useNavigate(); 37 | 38 | const gotodeta = () => { 39 | navigate("/details"); 40 | }; 41 | 42 | var settings = { 43 | dots: false, 44 | infinite: false, 45 | speed: 500, 46 | slidesToShow: 4, 47 | slidesToScroll: 4, 48 | initialSlide: 0, 49 | nextArrow: , 50 | prevArrow: , 51 | responsive: [ 52 | { 53 | breakpoint: 1024, 54 | settings: { 55 | slidesToShow: 3, 56 | slidesToScroll: 3, 57 | infinite: true, 58 | dots: true, 59 | }, 60 | }, 61 | { 62 | breakpoint: 600, 63 | settings: { 64 | slidesToShow: 2, 65 | slidesToScroll: 2, 66 | initialSlide: 2, 67 | }, 68 | }, 69 | { 70 | breakpoint: 480, 71 | settings: { 72 | slidesToShow: 1, 73 | slidesToScroll: 1, 74 | }, 75 | }, 76 | ], 77 | }; 78 | return ( 79 |
80 |
81 | 82 |
83 |
84 | 88 |
89 |
GOSTOPS
90 |
91 | Experience The Best Of Monsoon With These Trendy GOSTOPS Stays 92 | Under Rs 2,000 93 |
94 |
95 | 96 |
97 |
98 | 102 |
103 |
SINGAPORE TOURISM BOARD
104 |
105 | The Panchi Befikra Contest Is Live And Here's Why You Should 106 | Participate! 107 |
108 |
109 | 110 |
111 |
112 | 116 |
117 |
SAUDI TOURISM AUTHORITY
118 |
119 | This Quiz on Saudi Will Help You Design Your Best Adventure! 120 |
121 |
122 | 123 |
124 |
125 | 129 |
130 |
NIYO GLOBAL
131 |
132 | India's Top Travel Influencers Share Their Best Secrets for 133 | Budget International Trips! 134 |
135 |
136 | 137 |
138 |
139 | 143 |
144 |
SAUDI TOURISM AUTHORITY
145 |
146 | Offering a Mix of Culture and Modernity, Riyadh Is Perfect for 147 | Every Kind of Traveller 148 |
149 |
150 | 151 |
152 |
153 | 157 |
158 |
SAUDI TOURISM AUTHORITY
159 |
160 | સાઉદીઃ કેવી રીતે કરવો આ અનોખા દેશનો યાદગાર પ્રવાસ 161 |
162 |
163 | 164 |
165 |
166 | 170 |
171 |
AMBERSTUDENTS
172 |
173 | Student in London? Here’s Your Guide to Affordable and Exciting 174 | Ways to Explore The City! 175 |
176 |
177 | 178 |
179 |
180 | 184 |
185 |
SAUDI TOURISM AUTHORITY
186 |
187 | সমুদ্র, স্থাপত্য ও ইতিহাসের এক অনন্য মেলবন্ধন - সৌদি আরব ভ্রমণের 188 | একটি সম্পূর্ণ ট্রাভেল গাইড 189 |
190 |
191 | 192 |
193 |
194 | ); 195 | }; 196 | -------------------------------------------------------------------------------- /my-app/src/Pankaj/Find/Find.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "slick-carousel/slick/slick.css"; 3 | import "slick-carousel/slick/slick-theme.css"; 4 | import Slider from "react-slick"; 5 | import styles from "./Find.module.css"; 6 | 7 | function SampleNextArrow(props) { 8 | const { className, style, onClick } = props; 9 | return ( 10 |
15 | ); 16 | } 17 | 18 | function SamplePrevArrow(props) { 19 | const { className, style, onClick } = props; 20 | return ( 21 |
31 | ); 32 | } 33 | 34 | export const Find = () => { 35 | var settings = { 36 | dots: false, 37 | infinite: false, 38 | speed: 500, 39 | slidesToShow: 4, 40 | slidesToScroll: 4, 41 | initialSlide: 0, 42 | nextArrow: , 43 | prevArrow: , 44 | responsive: [ 45 | { 46 | breakpoint: 1024, 47 | settings: { 48 | slidesToShow: 3, 49 | slidesToScroll: 3, 50 | infinite: true, 51 | dots: true, 52 | }, 53 | }, 54 | { 55 | breakpoint: 600, 56 | settings: { 57 | slidesToShow: 2, 58 | slidesToScroll: 2, 59 | initialSlide: 2, 60 | }, 61 | }, 62 | { 63 | breakpoint: 480, 64 | settings: { 65 | slidesToShow: 1, 66 | slidesToScroll: 1, 67 | }, 68 | }, 69 | ], 70 | }; 71 | return ( 72 |
73 |
74 | 75 |
76 |
77 | 81 |
82 | 83 |
84 | Tripoto's Destination Of The Month:Udaipur 85 |
86 |
87 | By{" "} 88 | Tripoto 89 |
90 |
91 | 92 |
93 |
94 | 98 |
99 | 100 |
101 | Cheapest Domestic Flights For Aug&Sept 2022 102 |
103 |
104 | By{" "} 105 | Tanisha Mundra 106 |
107 |
108 | 109 |
110 |
111 | 115 |
116 | 117 |
118 | Here Are The Best Places To Vist In August In India 119 |
120 |
121 | By{" "} 122 | Disha kapkoti 123 |
124 |
125 | 126 |
127 |
128 | 132 |
133 | 134 |
135 | Trips Under 10K INR That You Need To Bookmark For August 136 |
137 |
138 | By{" "} 139 | Tripoto 140 |
141 |
142 | 143 |
144 |
145 | 149 |
150 | 151 |
152 | Heven Hill Station That You Can Escape In This August 153 |
154 |
155 | By{" "} 156 | Deepti Divya 157 |
158 |
159 | 160 |
161 |
162 | 166 |
167 | 168 |
169 | This Town In MP Will SoonGain "WILD" Popularity 170 |
171 |
172 | By{" "} 173 | Sujay Jamkhandi 174 |
175 |
176 | 177 |
178 |
179 | 183 |
184 | 185 |
186 | Things To Remmber Before Planning A Monsoon Bike Trip 187 |
188 |
189 | By{" "} 190 | Adete Dhaiya 191 |
192 |
193 | 194 |
195 |
196 | 200 |
201 | 202 |
Why You Should Vist Goa In Monsoon
203 |
204 | By{" "} 205 | Vinnie Singh 206 |
207 |
208 | 209 |
210 |
211 | ); 212 | }; 213 | -------------------------------------------------------------------------------- /my-app/src/beaches/Beach.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext, useEffect, useState } from "react"; 2 | import styled from "styled-components" 3 | import axios from "axios"; 4 | import "slick-carousel/slick/slick.css"; 5 | import "slick-carousel/slick/slick-theme.css"; 6 | import { IoIosArrowDropleft, IoIosArrowDropright } from "react-icons/io"; 7 | 8 | import Topbeach from "./Topbeach"; 9 | import Package from "./Package"; 10 | import Comprehensive from "./Comprehensive" 11 | import { ShowContext } from "../Context/ShowContext"; 12 | import { Box } from "@chakra-ui/react"; 13 | const Beach = () => { 14 | const { show, setShow } = useContext(ShowContext) 15 | const [beachgrid, setBeachgrid] = useState([]); 16 | const [vlogData, setVlogData] = useState([]); 17 | useEffect(() => { 18 | axios 19 | .get(" https://persian-blue-hen-slip.cyclic.app/hotels") 20 | .then((res) => { 21 | setBeachgrid(res.data); 22 | setVlogData(res.data); 23 | 24 | }); 25 | }, []); 26 | useEffect(() => { 27 | setShow(true) 28 | }, []) 29 | 30 | function SampleNextArrow(props) { 31 | const { onClick } = props; 32 | return ( 33 |
34 | 39 |
40 | 41 | 42 | ); 43 | } 44 | 45 | function SamplePrevArrow(props) { 46 | const { onClick } = props; 47 | 48 | return ( 49 |
50 | 55 |
56 | 57 | 58 | ); 59 | } 60 | 61 | let settings = { 62 | infinite: true, 63 | speed: 500, 64 | slidesToShow: 3, 65 | slidesToScroll: 3, 66 | nextArrow: , 67 | prevArrow: , 68 | responsive: [ 69 | { 70 | breakpoint: 1024, 71 | settings: { 72 | slidesToShow: 3, 73 | slidesToScroll: 3, 74 | infinite: true, 75 | dots: true 76 | } 77 | }, 78 | { 79 | breakpoint: 600, 80 | settings: { 81 | slidesToShow: 2, 82 | slidesToScroll: 2, 83 | initialSlide: 2 84 | } 85 | }, 86 | { 87 | breakpoint: 480, 88 | settings: { 89 | slidesToShow: 1, 90 | slidesToScroll: 1 91 | } 92 | } 93 | ] 94 | }; 95 | 96 | return ( 97 | 98 | 99 | 104 | 105 |

Best Beaches Around The World

106 |

The crunch of white sand beneath your feet and the thundering ocean beckoning you into its cool waters. Explore all you need to know about taking a perfect trip to the beach! 107 |

108 | 109 | Sand, waves and wind make a perfect getaway from the hustle bustle of city life. Beaches can make anyone happy. Just take a beach vacation anywhere in the world and you will find your happiness in the waves. You can choose from a variety of destinations for your next beach holiday in India or anywhere. Pick a beach resort according to your budget and spend time with the family or go for a solo trip on picture perfect shores that nature has blessed us with. Enjoy the sunrise, go for water sports or just sit idle on sandy floors of these beautiful beaches. 110 | 111 |
112 |

Tripoto's Top Beach Picks for January, February, March 2022

113 | 114 | {beachgrid && 115 | beachgrid.map((ele) => ( 116 |
117 | 118 |

{ele.title}

119 |
120 | By 121 | {ele.by} 122 |
123 |
124 | ))} 125 | 126 | 127 | 128 | 129 | 130 |
131 |

132 | Top Tripoto Vlogs for Beaches This Week 133 |

134 | 135 | {vlogData && 136 | vlogData.map((ele) => ( 137 |
138 | 139 |

{ele.title}

140 |
141 | By 142 | {ele.by} 143 |
144 |
145 | ))} 146 | 147 |
148 | 149 | ); 150 | }; 151 | 152 | export default Beach; 153 | 154 | const BeachWrapper = styled.div` 155 | margin: auto; 156 | box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px, rgba(0, 0, 0, 0.1) 0px 2px 3px -3px, rgba(0, 0, 0, 0.1) 0px -3px 0px inset; 157 | width: 97%; 158 | font-family: sans-serif; 159 | backgroundColor:gray; 160 | h1{ 161 | font-size:29px; 162 | font-weight:700; 163 | margin-bottom:8px; 164 | } 165 | text { 166 | line-height: 20px; 167 | letter-spacing: 0.6px; 168 | } 169 | @media (max-width: 790px) { 170 | width: 95%; 171 | } 172 | `; 173 | 174 | const BeachGridWrapper = styled.div` 175 | display: grid; 176 | gap: 10px; 177 | 178 | grid-template-columns: repeat(3, 1fr); 179 | img { 180 | width: 100%; 181 | height: 220px; 182 | border-radius: 8px; 183 | } 184 | 185 | h3 { 186 | font-weight: 700; 187 | } 188 | 189 | span { 190 | color: black; 191 | font-weight: 500; 192 | margin-right: 4px; 193 | } 194 | 195 | h5 { 196 | color: rgb(56, 159, 221); 197 | margin-left: 4px; 198 | margin-top: 5px; 199 | font-size: 16px; 200 | font-weight: 500; 201 | } 202 | 203 | 204 | @media (max-width: 1000px) { 205 | grid-template-columns: repeat(1, 1fr); 206 | img { 207 | width: 100%; 208 | height: 25rem; 209 | object-fit: cover; 210 | object-position: center; 211 | } 212 | } 213 | `; 214 | 215 | const VlogWrapper = styled.div` 216 | display: flex; 217 | margin: auto; 218 | justify-content: space-between; 219 | width: 100%; 220 | box-sizing: border-box; 221 | margin-bottom:40px; 222 | div { 223 | width: 23%; 224 | } 225 | img { 226 | width: 100%; 227 | height: 11rem; 228 | border-radius: 5px; 229 | object-fit: cover; 230 | object-position: center; 231 | } 232 | 233 | h3 { 234 | font-size: 18px; 235 | font-weight: 700; 236 | } 237 | 238 | span { 239 | color: black; 240 | font-weight: 500; 241 | margin-right: 4px; 242 | } 243 | 244 | h5 { 245 | color: rgb(56, 159, 221); 246 | margin-left: 4px; 247 | margin-top: -5px; 248 | font-size: 16px; 249 | font-weight: 500; 250 | } 251 | 252 | @media (max-width: 1000px) { 253 | flex-direction: column; 254 | 255 | div { 256 | width: 100%; 257 | } 258 | img { 259 | height: 25rem; 260 | object-fit: cover; 261 | object-position: center; 262 | } 263 | } 264 | `; 265 | -------------------------------------------------------------------------------- /my-app/src/Pankaj/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./Home.module.css"; 3 | import { Swiper, SwiperSlide } from "swiper"; 4 | import "swiper/css"; 5 | import { Input } from "@chakra-ui/react"; 6 | import "swiper/css/navigation"; 7 | import { Navigation } from "swiper"; 8 | import { Inspotlight } from "./Insportlight/Inspotlight"; 9 | import { Find } from "./Find/Find"; 10 | import { Place } from "./Place/Place"; 11 | import { Check } from "./Check/Check"; 12 | import { Travel } from "./Travel/Travel"; 13 | import { Readmore } from "./Creator/Readmore"; 14 | import { Creator } from "./Creator/Creator"; 15 | import { Plan } from "./Plan/Plan"; 16 | import { Watch } from "./Watch/Watch"; 17 | import { Book } from "./Book/Book"; 18 | 19 | export const Home = () => { 20 | return ( 21 |
22 |
23 | {/*
24 |
25 | 26 |
27 |
28 | 29 |
30 |
31 | 32 |
33 |
34 | 35 |
36 |
*/} 37 |
38 |
39 |

40 | In the Spotlight: Partnerships 41 |

42 |
43 | 44 |
45 |
46 | 50 |
51 | 52 |
53 |
54 |

62 | Find Best Places to Visit in India in August & September 63 |

64 |
65 |
66 | 67 |
68 |
69 | 70 |
71 |
72 |

80 | Plan International Trips for August & September 81 |

82 |
83 |
84 | 85 |
86 |
87 | 88 |
89 |
90 |

98 | Check Out Best Hotels and Properties for Every Type of 99 | Traveller 100 |

101 |
102 |
103 | 104 |
105 |
106 | 107 |
108 |
109 |

117 | Travel and Learn with Tripoto's Mindful Retreats 118 |

119 |
120 |
121 | 122 |
123 |
124 | 125 |
126 |
127 |

135 | Book Budget Tour Packages Curated For You 136 |

137 |
138 |
139 | 140 |
141 |
142 | 143 | {/*
144 |
145 |

153 | In the Spotlight: Tripoto Creators of the Month - July 2022 154 |

155 |
156 |
157 | 158 | 159 |
160 |
161 | 165 |
166 |
167 | 171 |
172 |
173 | 177 |
178 |
179 |
180 |
*/} 181 | 182 |
183 |
184 |

192 | Plan Your Next Trip Using Tripoto's Complete Destination 193 | Guides 194 |

195 |
196 |
197 | 198 |
199 |
200 | 201 |
202 |
203 |

211 | Watch Tripoto's Top Travel Vlogs of the Week 212 |

213 |
214 | 215 |
216 | 217 |
218 |
219 |
220 |
221 |
222 |
223 | ); 224 | }; 225 | -------------------------------------------------------------------------------- /my-app/src/Packages/product.jsx: -------------------------------------------------------------------------------- 1 | import { useContext, useEffect } from "react"; 2 | import { useDispatch, useSelector } from "react-redux"; 3 | import { 4 | getProductFailed, 5 | getProductRequest, 6 | getProductSuccess, 7 | } from "../Reducer/action"; 8 | import { 9 | Box, 10 | SimpleGrid, 11 | Image, 12 | Square, 13 | Flex, 14 | Button, 15 | Avatar, 16 | Center, 17 | Select, 18 | useToast, 19 | } from "@chakra-ui/react"; 20 | import { MdLocationOn } from "react-icons/md"; 21 | import { useState } from "react"; 22 | import { useNavigate } from "react-router-dom"; 23 | import { ShowContext } from "../Context/ShowContext"; 24 | 25 | const Product = () => { 26 | const dispatch = useDispatch(); 27 | const products = useSelector((store) => store.nasirReducer.products); 28 | 29 | const [page, setPage] = useState(1); 30 | const [width, setWidth] = useState(null); 31 | const [limit, setLimit] = useState(9); 32 | const [sort, setSort] = useState("asc"); 33 | const [filter, setFilter] = useState( 34 | "OYO Total Holidays&brand_name=Destynasia Venture&brand_name=TUI India&brand_name=Tripoto Verified Partner&brand_name=IFLy Vacation PVT Ltd.&brand_name=Explore More Holidays&brand_name=IFLy Vacation PVT Ltd." 35 | ); 36 | 37 | const navigate = useNavigate(); 38 | const { isAuth } = useContext(ShowContext); 39 | const toast = useToast(); 40 | 41 | const getProduct = async (url) => { 42 | return await fetch(url); 43 | }; 44 | 45 | useEffect(() => { 46 | dispatch(getProductRequest()); 47 | getProduct( 48 | `https://fantastic-lab-coat-moth.cyclic.app/Package?_limit=${limit}&_page=${page}&_sort=price&_order=${sort}&brand_name=${filter}` 49 | ) 50 | .then((e) => e.json()) 51 | .then((e) => dispatch(getProductSuccess(e))) 52 | .catch((e) => dispatch(getProductFailed())); 53 | }, [page, limit, width, sort, filter]); 54 | 55 | useEffect(() => { 56 | setWidth(window.screen.width); 57 | if (width < 1280) { 58 | setLimit(8); 59 | } else { 60 | setLimit(9); 61 | } 62 | }, [limit, width]); 63 | 64 | const handleChange = (e) => { 65 | setSort(e.target.value); 66 | }; 67 | 68 | const handleFilter = (e) => { 69 | setFilter(e.target.value); 70 | }; 71 | 72 | const handleGotoSinglePage = (id) => { 73 | if (isAuth) { 74 | navigate(`/packages/${id}`); 75 | } else { 76 | toast({ 77 | title: "Your Are Not Logged In", 78 | description: "Please Login To Go To Cart", 79 | status: "error", 80 | duration: 4000, 81 | isClosable: true, 82 | }); 83 | } 84 | }; 85 | 86 | return ( 87 | 88 | 93 | 94 | 105 | 109 | 110 | 121 | 134 | 135 | 136 | 148 | {products.map((elem) => ( 149 | 156 | 157 | 167 | {elem.title} 168 | 169 | 170 | 191 | 211 | 212 | 213 | 222 | {elem.price} onwards 223 | 224 | 248 | 249 | 250 | 261 |
270 | {elem.brand_name} 271 |
272 | 273 | 274 | ))} 275 | 276 | 277 | 285 | 295 | 303 | 304 | 305 | ); 306 | }; 307 | 308 | export default Product; 309 | -------------------------------------------------------------------------------- /my-app/src/Pankaj/Book/Book.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import "slick-carousel/slick/slick.css"; 3 | import "slick-carousel/slick/slick-theme.css"; 4 | import Slider from "react-slick"; 5 | import styles from "./Book.module.css"; 6 | import { Button, ButtonGroup } from "@chakra-ui/react"; 7 | import { useNavigate } from "react-router-dom"; 8 | 9 | function SampleNextArrow(props) { 10 | const { className, style, onClick } = props; 11 | return ( 12 |
17 | ); 18 | } 19 | 20 | function SamplePrevArrow(props) { 21 | const { className, style, onClick } = props; 22 | return ( 23 |
33 | ); 34 | } 35 | 36 | export const Book = () => { 37 | var settings = { 38 | dots: false, 39 | infinite: false, 40 | speed: 500, 41 | slidesToShow: 3, 42 | slidesToScroll: 3, 43 | initialSlide: 0, 44 | nextArrow: , 45 | prevArrow: , 46 | responsive: [ 47 | { 48 | breakpoint: 1024, 49 | settings: { 50 | slidesToShow: 3, 51 | slidesToScroll: 3, 52 | infinite: true, 53 | dots: true, 54 | }, 55 | }, 56 | { 57 | breakpoint: 600, 58 | settings: { 59 | slidesToShow: 2, 60 | slidesToScroll: 2, 61 | initialSlide: 2, 62 | }, 63 | }, 64 | { 65 | breakpoint: 480, 66 | settings: { 67 | slidesToShow: 1, 68 | slidesToScroll: 1, 69 | }, 70 | }, 71 | ], 72 | }; 73 | 74 | const navigate = useNavigate(); 75 | 76 | const handleClick = () => { 77 | navigate("/packages"); 78 | }; 79 | 80 | return ( 81 |
82 |
83 | 84 |
85 |
86 | 90 |
91 |
PACKAGE
92 |
93 | Learn Sketchinng & Go On Guided Foreset Walks Around The Himalayan 94 | Trails | Cosmix Greeks, Dharamkot 95 |
96 |
97 | 98 | 99 | {" "} 100 | Himachal Pradesh 101 | 102 | 103 | 104 |
105 |
106 | 107 | ₹ 8500 / person 108 | 109 |
110 |
111 | Get Quotes 112 |
113 |
114 |
115 | 116 |
117 |
118 |
119 |
120 | 124 | 125 | Tripoto Verified Partner 126 | 127 |
128 |
129 | 130 |
131 |
132 | 136 |
137 |
PACKAGE
138 |
139 | Embrace Minimalistic Community Life & Learn A Traditional Martial 140 | Art | Beyond Community 141 |
142 |
143 | 144 | 145 | {" "} 146 | 147 | Sonalika Debnath 148 | 149 | 150 | 153 | 154 |
155 |
156 | 157 | ₹ 8500{" "} 158 | 159 | {" "} 160 | / person{" "} 161 | 162 | 163 |
164 |
169 | Get Quotes 170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 | 182 | 183 | Tripoto Verified Partner 184 | 185 |
186 |
187 | 188 |
189 |
190 | 194 |
195 |
PACKAGE
196 |
197 | Leaarn To Cook A Traditional Rajasthani Meal At A 200 Year-old 198 | Luxury Haveli 199 |
200 |
201 | 202 | 203 | {" "} 204 | Rajasthan 205 | 206 | 209 | 210 |
211 |
212 | 213 | ₹ 8500 / person 214 | 215 |
216 |
221 | Get Quotes 222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 | 233 | Tripoto Verified Partner 234 |
235 |
236 | 237 |
238 |
239 | 243 |
244 |
PACKAGE
245 |
246 | Trek To Triund And Stay At The Residence Of Kangra's Maharaja | 247 | Clouds End Villa, Dharamshala 248 |
249 |
250 | 251 | 252 | {" "} 253 | Rashmi Sharma 254 | 255 | 256 | 257 |
258 |
259 | 260 | ₹ 8500 / person 261 | 262 |
263 |
268 | Get Quotes 269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 | 280 | Tripoto Verified Partner 281 |
282 |
283 | 284 |
285 |
286 | 290 |
291 |
PACKAGE
292 |
293 | Stargaze & Enjoy A Picnic In the Hills As You Stay At A Unique 294 | A-Framed Cottage | Urna Boutique Stay 295 |
296 |
297 | 298 | 299 | {" "} 300 | Aparajita 301 | 302 | 305 | 306 |
307 |
308 | 309 | ₹ 8500 / person 310 | 311 |
312 |
317 | Get Quotes 318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 | 329 | Tripoto Verified Partner 330 |
331 |
332 | 333 |
334 |
335 | 339 |
340 |
PACKAGE
341 |
342 | Explore One Of Asia's Spookiest Spots While Unwinding Amidst 343 | Nature 344 |
345 |
346 | 347 | 348 | {" "} 349 | Divyangna(Nomadic_Missy) 350 | 351 | 352 | 353 |
354 |
355 | 356 | ₹ 8500 / person 357 | 358 |
359 |
364 | Get Quotes 365 |
366 |
367 |
368 |
369 |
370 |
371 |
372 | 376 | Tripoto Verified Partner 377 |
378 |
379 | 380 |
381 |
382 | ); 383 | }; 384 | --------------------------------------------------------------------------------