19 |
30 | );
31 | }
32 |
33 | export default Component;
34 |
--------------------------------------------------------------------------------
/src/components/Step.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styled from 'styled-components'
3 |
4 | function Step({image, title, text}) {
5 | return (
6 |
8 | {/* })
*/}
9 |
11 |
12 | ![pic]({require("../assets/reviewbg.png")})
13 |
14 | ![avatar]({require("../assets/person.png")})
15 |
18 |
19 |
20 |
21 |
22 |
23 |
26 |
27 |
28 |
29 | {/* */}
30 |
31 | )
32 | }
33 |
34 | export default Reviews;
--------------------------------------------------------------------------------
/src/components/Navbar/Navigations.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 |
4 | const Nav = styled.ul`
5 | display: flex;
6 | justify-content: space-between;
7 | align-items: center;
8 | flex:1;
9 | margin: 0 2rem;
10 | @media (max-width:600px) {
11 |
12 | display: none;
13 | }
14 |
15 | `
16 | const List = styled.li`
17 | cursor: pointer ;
18 | font-weight: 100;
19 | border: 2px solid #04A551;
20 | border-radius: 1.5rem;
21 | color: #ff0;
22 | margin:1rem;
23 | text-align: center;
24 | font-family: roboto;
25 | font-size: 1.35rem;
26 | overflow: hidden;
27 | padding: 0.50rem 1.6rem;
28 | position: relative;
29 | text-decoration: none;
30 | transition: 0.2s transform ease-in-out;
31 | will-change: transform;
32 | z-index: 0;
33 | ::after {
34 | background-color: #04A551;
35 | border-radius: 3rem;
36 | content: '';
37 | display: block;
38 | height: 100%;
39 | width: 100%;
40 | position: absolute;
41 | left: 0;
42 | top: 0;
43 | transform: translate(-100%, 0) rotate(10deg);
44 | transform-origin: top left;
45 | transition: 0.2s transform ease-out;
46 | will-change: transform;
47 | z-index: -1;
48 | }
49 |
50 | &:hover::after
51 | {
52 | transform: translate(0, 0);
53 | }
54 | &:hover
55 | {
56 | border: 2px solid transparent;
57 | color: indigo;
58 | transform :scale(1.05);
59 | will-change :transform;
60 | }
61 | `
62 |
63 | const Navigation = () => {
64 | return (
65 |
76 | );
77 | }
78 |
79 | export default Navigation;
80 |
81 |
--------------------------------------------------------------------------------
/src/components/Service.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styled from 'styled-components'
3 | import ServiceCard from './ServiceCard'
4 |
5 | const cards = [
6 | {
7 | title: "Ticket Booking",
8 | text: "We Book All Kinds of national or international tickets for your destination.",
9 | image: "ticket.png",
10 | active: false
11 | },
12 | {
13 | title: "Hotel Booking",
14 | text: "You can easily book your according to your budget hotel by our website.",
15 | image: "hotel.png",
16 | active: false
17 | },
18 | {
19 | title: "Tour Plan",
20 | text: "We provide you the best plan within a short time explore more.",
21 | image: "tour.png",
22 | active: false
23 | }
24 | ]
25 |
26 | function Service() {
27 | return (
28 | */}
9 | What People Say About Us
10 |
13 |
15 | Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor
16 | - Jeo Stanley 17 |
21 |
23 | Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor
24 | - Stanley Jeo 25 | */}
30 |
11 | {activities}
12 | {duration}
13 |
14 |
8 |
9 | We always try to give you
10 | the best service
11 | We always try to make our customer Happy. We provide all kind of
12 | facilities. Your Satisfaction is our main priority.
13 |
14 |
19 |
21 |
22 | )
23 | }
24 |
25 | export default ServiceStats
26 |
27 | const Container = styled.div`
28 | background: rgba(0, 88, 83, 0.05);
29 | display: flex;
30 | flex-direction: column;
31 | width: 100vw;
32 | height: 80vh;
33 | @media (max-width: 480px) {
34 | padding: 0 16px;
35 | height: 100%;
36 | }
37 | `
38 |
39 | const Background = styled.img`
40 | position: absolute;
41 | align-self: center;
42 | max-width: 100vw;
43 | `
44 | const CoverTitleu = styled.div` // cover title upper text
45 | margin-top: 10vh;
46 | color: #f0f0f0;
47 | font-weight: 600;
48 | font-size: 6vh;
49 | text-align: center;
50 |
51 | `
52 |
53 | const CoverTitle = styled.div`
54 | color: black;
55 | font-weight: 600;
56 | font-size: 6vh;
57 | text-align: center;
58 | `
59 | const CoverText = styled.div`
60 | font-size: 14px;
61 | color: #eee;
62 | text-align: center;
63 | line-height: 22px;
64 | `
65 |
66 | const CoverTextu = styled.div` // cover text upper
67 | font-size: 14px;
68 | color: #eee;
69 | padding-top: 5vh;
70 | text-align: center;
71 | line-height: 22px;
72 | `
73 |
74 | const StatsCards = styled.div`
75 | display: flex;
76 | flex: 1;
77 | justify-content: space-evenly;
78 | align-items: center;
79 | color:#f0f0f0;
80 | @media (max-width: 480px) {
81 | margin-top: 50px;
82 | display: grid;
83 | grid-template-columns: 1fr 1fr;
84 | grid-gap: 10px;
85 | text-align: center;
86 | }
87 | `
--------------------------------------------------------------------------------
/src/components/Cover.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styled from 'styled-components'
3 | function Cover() {
4 | return (
5 | })
{location}or
16 |-
25 |
-
31 |