44 | {
45 | ServiceTexts.cards.map((card, index) => (
46 |
47 |
48 |
49 | {card.firstText}
50 |
51 |
52 | {card.secondText}
53 |
54 |
55 | ))
56 | }
57 |
58 |
10 |
11 | {children}
12 |
13 | )
14 | }
--------------------------------------------------------------------------------
/src/components/atoms/Text.tsx:
--------------------------------------------------------------------------------
1 | type TextOwnProps
16 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
2 |
3 | @tailwind base;
4 | @tailwind components;
5 | @tailwind utilities;
6 |
7 | /* @layer components {
8 | .pseudoBefore {
9 | @apply relative z-10 before: absolute before:-z-10 before:content-[''];
10 | }
11 | } */
12 |
13 | .cardPseudo {
14 | position: relative;
15 | /* z-index: 5; */
16 | }
17 |
18 | .cardPseudo::after {
19 | content: "";
20 | position: absolute;
21 | bottom: 1.5rem;
22 | left: 1.5rem;
23 | width: 80px;
24 | height: 80px;
25 | border-radius: 1.5rem 0 1rem 0;
26 | z-index: -1;
27 | transition: 300ms cubic-bezier(1, 0, 0, 1);
28 | }
29 |
30 | .cardPseudo:hover::after {
31 | bottom: -1.5rem;
32 | left: -1.5rem;
33 | }
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { Routes, Route, useLocation } from "react-router-dom";
2 | //importing react slick slider
3 | import "slick-carousel/slick/slick.css";
4 | import "slick-carousel/slick/slick-theme.css";
5 |
6 | import { animateScroll } from "react-scroll";
7 |
8 | import NavBar from "./components/organs/NavBar"
9 | import Home from "./components/pages/Home";
10 | import { useEffect } from "react";
11 | import Footer from "./components/organs/Footer";
12 |
13 | function App() {
14 | const directory = useLocation();
15 | useEffect(() => {
16 | animateScroll.scrollToTop({
17 | duration: 0,
18 | });
19 | }, [directory.pathname]);
20 |
21 | return (
22 |
18 | {children}
19 |
20 |
23 |
25 |
27 |
28 |
29 | )
30 | }
31 |
32 | export default App
33 |
--------------------------------------------------------------------------------
/src/components/molecules/SubscribeForm.tsx:
--------------------------------------------------------------------------------
1 | import { Envelope } from '@phosphor-icons/react'
2 | import { Input } from '../atoms/Input'
3 | import { Button } from '../atoms/Button'
4 | import { NewsletterTexts } from '../particles/DataLists'
5 |
6 | export const SubscribeForm = () => {
7 | return (
8 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/organs/NewsLetter.tsx:
--------------------------------------------------------------------------------
1 | import { Image } from "../atoms/Image"
2 | import { Text } from "../atoms/Text"
3 | import { SubscribeForm } from "../molecules/SubscribeForm"
4 | import { NewsletterTexts } from "../particles/DataLists"
5 | import groupOfPlus from "../../assets/plusGroup2.png"
6 |
7 |
8 | const NewsLetter = () => {
9 | return (
10 |
15 |
16 | {NewsletterTexts.firstText}
17 |
18 |
20 | 
2 |
3 | # Jadoo Travel Agency Landing Page
4 |
5 | This project is a landing page for Jadoo Travel Agency built using React, TypeScript, and Vite.
6 |
7 | ## Features
8 |
9 | - Beautiful and modern design
10 | - Responsive layout for various screen sizes
11 | - Smooth scrolling navigation
12 | - Interactive components and animations
13 | - Information about Jadoo Travel Agency services
14 |
15 | ## Technologies Used
16 |
17 | - React
18 | - TypeScript
19 | - Vite
20 | - HTML5
21 | - CSS3
22 | - TailwindCSS
23 | - JavaScript
24 | - React Router
25 | - Other libraries and dependencies (specified in package.json)
26 |
27 | ## Getting Started
28 |
29 | ### Prerequisites
30 |
31 | - Node.js (v14 or higher)
32 | - npm or Yarn
33 |
34 | ### Installation
35 |
36 | 1. Clone the repository:
37 |
38 | ```bash
39 | git clone https://github.com/your-username/jadoo-travel-agency.git
40 | ```
41 |
42 | 2. Navigate to the project directory:
43 |
44 | ```bash
45 | cd jadoo-travel-agency
46 | ```
47 |
48 | 3. Install the dependencies:
49 |
50 | ```bash
51 | npm install
52 | ```
53 |
54 | or
55 |
56 | ```bash
57 | yarn install
58 | ```
59 |
60 | 4. Start the development server:
61 |
62 | ```bash
63 | npm run dev
64 | ```
65 |
66 | or
67 |
68 | ```bash
69 | yarn dev
70 | ```
71 |
72 | 5. Open your browser and visit `http://localhost:3000` to see the landing page.
73 |
74 | ## Project Structure
75 |
76 | The project structure follows a standard React application structure:
77 |
78 | - **public:** Contains static assets such as images, fonts, and the index.html file.
79 | - **src:**
80 | - **components:** Reusable components used in the landing page.
81 | - **pages:** Top-level pages or views for different sections of the landing page.
82 | - **styles:** Stylesheets, SCSS files, or CSS modules for styling components and pages.
83 | - **utils:** Utility functions or helper modules.
84 | - **App.tsx:** The main entry point of the application.
85 | - **index.tsx:** Initializes the React application and renders the root component.
86 |
87 | ## Deployment
88 |
89 | To deploy the Jadoo Travel Agency landing page, you can follow the deployment instructions specific to your chosen hosting platform (e.g., Netlify, Vercel, GitHub Pages, etc.). Typically, you need to build the project and configure the hosting platform to serve the generated files.
90 |
91 | ## Credits
92 |
93 | This project was developed by [SignorDev](https://github.com/signor1). It was created as a sample landing page for a travel agency based on the Jadoo brand.
94 |
95 | ## Demo
96 |
97 | [View Project](https://jadoo-tour.vercel.app)
98 |
99 | Feel free to explore the code, customize it, and use it as a foundation for your own projects. Happy traveling with Jadoo Travel Agency!
100 |
--------------------------------------------------------------------------------
/src/components/organs/Services.tsx:
--------------------------------------------------------------------------------
1 | import { Image } from "../atoms/Image"
2 | import { Text } from "../atoms/Text"
3 | import { ServiceTexts } from "../particles/DataLists"
4 | import GroupOfPlus from "../../assets/plusGroup.png"
5 | import { Card } from "../molecules/Card"
6 | import { useCallback } from "react"
7 | import Icon1 from "../../assets/icon1.png"
8 | import Icon2 from "../../assets/icon2.png"
9 | import Icon3 from "../../assets/icon3.png"
10 | import Icon4 from "../../assets/icon4.png"
11 | import { Fade } from "react-awesome-reveal"
12 |
13 |
14 |
15 |
16 | const Services = () => {
17 |
18 | const renderServiceIcon = useCallback((element: number) => {
19 | switch (element) {
20 | case 0:
21 | return Icon1;
22 | case 1:
23 | return Icon2;
24 | case 2:
25 | return Icon3;
26 | case 3:
27 | return Icon4;
28 | default:
29 | return "";
30 | }
31 | }, []);
32 | return (
33 |
17 |
18 | {HeroTexts.firstText}
19 |
20 |
21 | {HeroTexts.secondText}
22 |
23 |
24 | {HeroTexts.thirdText}
25 |
26 |
44 |
27 |
30 |
43 |
31 |
32 |
34 |
36 |
37 |
40 |
41 |
42 |
45 |
46 |
48 |
49 |
50 |
60 |
61 | {TestimonialTexts.firstText}
62 |
63 |
64 | {TestimonialTexts.secondText}
65 |
66 |
67 | {/* Testimonial Slides Container */}
68 |
69 |
102 |
70 | (sliderRef.current = slider)} {...settings}>
71 | {
72 | TestimonialTexts.feedBacks.map((feedBack, index) => (
73 |
91 |
92 | {/* Controllers */}
93 |
74 |
75 |
76 | {feedBack.text}
77 |
78 |
87 |
88 | ))
89 | }
90 |
79 |
80 | {feedBack.person}
81 |
82 |
83 | {feedBack.location}
84 |
85 |
86 |
94 |
97 |
100 |
101 |
33 |
34 | {BookingStepsTexts.secondText}
35 |
36 |
52 | {/* Card Container */}
53 | -
37 | {
38 | BookingStepsTexts.listOfSteps.map((step, index) => (
39 |
-
40 |
54 | {/* First Card */}
55 |
56 |
57 | {BookingStepsTexts.cardOne.name}
58 |
59 |
60 | {BookingStepsTexts.cardOne.date}
61 |
62 |
75 |
78 |
79 |
80 | {/* Second Absolute Card */}
81 |
82 |
83 | {BookingStepsTexts.cardTwo.status}
84 |
85 |
86 | {BookingStepsTexts.cardTwo.destination}
87 |
88 |
89 | {BookingStepsTexts.cardTwo.completion}
90 |
91 |
92 |
93 |
63 |
64 |
66 |
67 |
69 |
70 |
71 |
73 |
74 |
103 |
106 |
109 |
110 |
111 | {/* Slides */}
112 |
113 | (sliderRef.current = slider)} {...settings}>
114 | {
115 | TopDestinationTexts.cards.map((card, index) => (
116 |
137 |
138 |
139 |
117 |
118 |
133 |
134 | ))
135 | }
136 |
119 |
120 | {card.country}
121 |
122 |
123 | {card.price}
124 |
125 |
126 |
127 |
129 | {card.duration}
130 |
131 |
132 |