Commit 7bcfa350 authored by Ravindu Chamod's avatar Ravindu Chamod

First commit

parent 998a9553
This diff is collapsed.
{
"name": "travelweb",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.10.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
.App {
text-align: center;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/*Google fonts*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
\ No newline at end of file
import './App.css';
import { Route, Routes } from 'react-router-dom';
import Home from './routes/Home';
import About from './routes/About';
import Service from './routes/Service';
import Contact from './routes/Contact';
import Test from './routes/Test';
function App() {
return (
<div className="App">
<Routes>
<Route path='/' element={<Home/>}/>
<Route path='/about' element={<About/>}/>
<Route path='/service' element={<Service/>}/>
<Route path='/contact' element={<Contact/>}/>
<Route path='/test' element={<Test/>}/>
</Routes>
</div>
);
}
export default App;
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
import React from 'react';
import './AboutUsStyles.css';
export default function AboutUs() {
return (
<div className='about-container'>
<h1>Our History</h1>
<p>Trippy is owned and managed by Trippy Pvt.Ltd, a leading brand in web designing and e-commerce solutions.</p>
<h1>Our Mission</h1>
<p>Our mission is to touch the horizon where our capabilities may successfully meet with the requirements of our clients.</p>
<h1>Our Vision</h1>
<p>To sow the seeds of par-excellence services with customer centric approach and reap the trust of worldwide clients.</p>
</div>
)
}
.about-container{
margin: 4rem 6rem;
text-align: start;
}
.about-container h1{
padding-bottom: 1rem;
}
.about-container p{
padding-bottom: 2rem;
}
@media screen and (max-width: 850px) {
.about-container{
margin: 4rem 2rem;
}
}
\ No newline at end of file
import './ContactFormStyles.css';
import React from 'react'
export default function ContactForm() {
return (
<div className='form-container'>
<h1>Send a message to us!</h1>
<form>
<input placeholder='Name'/>
<input placeholder='Email'/>
<input placeholder='Subject'/>
<textarea placeholder='Message' rows='4'></textarea>
<button>Send Message</button>
</form>
</div>
)
}
.form-container{
margin: 4rem 6rem;
color: #2a2a2a;
}
.form-container form{
padding-top: 3rem;
display: flex;
flex-direction: column;
width: 50%;
margin: auto;
}
.form-container input{
height: 3rem;
padding: 0 1rem ;
margin-bottom: 2rem;
border-radius: .3rem;
border: 1px solid #2a2a2a ;
}
.form-container textarea{
padding: 1rem ;
margin-bottom: 2rem;
border-radius: .3rem;
border: 1px solid #2a2a2a ;
}
.form-container button{
display: inline;
}
@media screen and (max-width: 850px){
.form-container{
margin: 4rem 2rem;
color: #2a2a2a;
}
.form-container form{
padding-top: 2rem;
width: 90%;
}
}
\ No newline at end of file
import Mountain1 from '../assets/1.jpg';
import Mountain2 from '../assets/2.jpg';
import Mountain3 from '../assets/5.jpg';
import Mountain4 from '../assets/8.jpg';
import DestinationData from './DestinationData';
import './DestinationStyles.css';
const Destination = () => {
return(
<div className="destination">
<h1>Popular Destination</h1>
<p>Tours give you the opportunity to see a lot,within a time frame.</p>
<DestinationData
className='first-des'
heading='Sydney Opera House'
text="The Sydney Opera House is a multi-venue performing arts centre in Sydney. Located on the foreshore of Sydney Harbour, it is widely regarded as one of the world's most famous and distinctive buildings and a masterpiece of 20th-century architecture."
img1={Mountain1}
img2={Mountain2}
/>
<DestinationData
className='first-des-reverse'
heading='Eiffel Tower'
text="The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower. Locally nicknamed 'La dame de fer', it was constructed from 1887 to 1889 as the centerpiece of the 1889 World's Fair."
img1={Mountain3}
img2={Mountain4}
/>
</div>
)
}
export default Destination;
\ No newline at end of file
import { Component } from 'react';
import './DestinationStyles.css';
import Mountain1 from '../assets/1.jpg';
import Mountain2 from '../assets/2.jpg';
import Mountain3 from '../assets/3.jpg';
import Mountain4 from '../assets/4.jpg';
class DestinationData extends Component {
render() {
return(
<div className={this.props.className}>
<div className='des-text'>
<h2>{this.props.heading}</h2>
<p>{this.props.text}</p>
</div>
<div className='image'>
<img alt='img' src={this.props.img1}/>
<img alt='img' src={this.props.img2}/>
</div>
</div>
)
}
}
export default DestinationData;
\ No newline at end of file
.destination{
margin: 4rem 6rem;
}
.destination h1{
font-size: 3rem;
}
.first-des{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 4.5rem;
}
.first-des-reverse{
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
margin-top: 4.5rem;
}
.des-text{
width: 45%;
text-align: start;
font-size: 1.1rem;
}
.des-text h2{
padding-bottom: 1rem;
}
.image{
position: relative;
width: 50%;
display: flex;
justify-content: space-between;
z-index: -99;
}
.image img{
width: 49%;
height: 350px;
object-fit: cover;
border-radius: 6px;
box-shadow: -1px 1px 62px -18px rgba(0, 0, 0, 0.19);
}
.image img:nth-child(2){
position: absolute;
top: -10%;
right: 0;
}
@media screen and (max-width: 850px){
.destination{
margin: 4rem 2rem;
}
.first-des{
display: flex;
flex-direction: column-reverse;
margin-top: 2.5rem;
}
.first-des-reverse{
display: flex;
flex-direction: column-reverse;
margin-top: 4.5rem;
}
.des-text{
width: 100%;
}
.image{
width: 100%;
margin: 1.8rem 0;
}
.image img{
height: 250px;
}
}
\ No newline at end of file
import './FeaturesStyles.css';
import React from 'react';
import TripData from './FeaturesData';
import Trip1 from '../assets/5.jpg';
import Trip2 from '../assets/6.jpg';
import Trip3 from '../assets/8.jpg';
import { Link } from "react-router-dom";
export default function Trip() {
return (
<div className='trip'>
<h1>Services</h1>
<div className='tripcard'>
<TripData
Link="/test"
image={Trip1}
heading="Thisara"
/>
<TripData
image={Trip3}
heading="Ravindu"
/>
<TripData
image={Trip2}
heading="Side Effects & Treatments"
/>
<TripData
image={Trip1}
heading="Rehabilitation Process"
/>
</div>
</div>
)
}
\ No newline at end of file
import './FeaturesStyles.css';
import React from 'react'
export default function TripData(props) {
return (
<div className='t-card'>
<div className='t-image'>
<a href={props.Link} target="_self" rel="noreferrer">
<img src={props.image} alt='image'/>
</a>
</div>
<h4>{props.heading}</h4>
</div>
)
}
.trip{
margin: 4rem 6rem;
color: #2a2a2a;
}
.trip h1{
font-size: 3rem;
}
.tripcard{
margin-top: 3rem;
display: flex;
justify-content: space-between;
}
.t-card{
width: 32%;
text-align: start;
box-shadow: 0 5px 25px 2px rgba(0,0,0,0..1);
border-radius: 7px;
cursor: pointer;
padding: 1rem .8rem;
}
.t-image{
height: 200px;
overflow: hidden;
border-radius: 7px;
}
.t-image img{
width: 100%;
height: 100%;
transition: 0.3s ease-in-out;
}
.t-image:hover img{
transform: scale(1.3);
}
.t-card h4{
font-size: 1.3rem;
padding: 0.9rem 0 0.2rem 0;
}
@media screen and (max-width:850px) {
.trip{
margin: 4rem 2rem;
}
.tripcard{
flex-direction: column;
}
.t-card{
width: 100%;
margin-bottom: 1.5rem;
}
}
\ No newline at end of file
import './FooterStyles.css';
const Footer = () => {
return(
<div className='footer'>
<div className='top'>
<div>
<h1>InsightCure®</h1>
<p></p>
</div>
</div>
<div className='bottom'>
<div>
<h4>Project</h4>
<a href='/'>Changelog</a>
<a href='/'>Status</a>
<a href='/'>License</a>
<a href='/'>All Versions</a>
</div>
<div>
<h4>Community</h4>
<a href='/'>GitHub</a>
<a href='/'>Issues</a>
<a href='/'>Project</a>
<a href='/'>Twitter</a>
</div>
<div>
<h4>Help</h4>
<a href='/'>Support</a>
<a href='/'>Troubleshooting</a>
<a href='/'>Contact Us</a>
</div>
<div>
<h4>Others</h4>
<a href='/'>Terms and Service</a>
<a href='/'>Privacy Policy</a>
<a href='/'>License</a>
</div>
</div>
<h5>Copyright © 2023 NEXUS DEV, All Rights Reserved</h5>
</div>
)
}
export default Footer;
\ No newline at end of file
.footer{
padding: 1rem 6rem;
background: #000;
color: #fff;
}
.top{
display: flex;
align-items: center;
text-align: start;
justify-content: space-between;
flex-wrap: wrap;
}
.top i{
color: #fff;
margin-left: 1rem;
font-size: 2rem;
}
.top i:hover{
color: #01959a;
}
.bottom{
padding-top: 2rem;
text-align: start;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.bottom div{
display: flex;
flex-direction: column;
}
.bottom h4{
font-size: 1.3rem;
padding: 1rem 0 .8rem 0;
}
.bottom a{
text-decoration: none;
color: #fafafa;
padding-bottom: 0.4rem;
font-size: 1.1rem;
}
@media screen and (max-width:850px){
.footer{
padding : 4rem 2rem;
}
.footer i{
margin: 1rem 1rem 0 0;
}
.bottom div{
width: 50%;
}
}
\ No newline at end of file
import './HeroStyles.css';
function Hero(props){
return(
<>
<div className={props.cName}>
<img alt='HerpImg' src={props.heroImg}/>
<div className='hero-text'>
<h1>{props.title}</h1>
<p>{props.text}</p>
<a href={props.url} className={props.btnClass}>
{props.buttonText}
</a>
</div>
</div>
</>
);
}
export default Hero;
\ No newline at end of file
.hero{
width: 100%;
height: 100vh;
position: relative;
}
.hero-mid{
width: 100%;
height: 70vh;
position: relative;
}
.hero-mid h1{
padding-top: 4rem !important;
}
img{
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-text{
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
width:100%;
}
.hero-text h1{
font-size: 3rem;
font-weight: 800;
background: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-text p{
font-size: 1.3rem;
color: #fff;
padding: 0.5rem 0 2rem 0;
}
.hero-text .show{
text-decoration: none;
background: #fff;
padding: 1rem 2rem;
border-radius: 6px;
font-size: 1.1rem;
font-weight: bold;
letter-spacing: 2px;
color: #222;
}
.hero-text .hide{
display: none;
}
@media screen and (max-width: 555px){
.hero-text h1{
padding: 10px 20px;
}
.hero-text p{
font-size: 1.1rem;
padding: 0 0 2rem 0;
}
.hero-text .show{
padding: 6rem 2rem;
border-radius: 6px;
font-size: 1rem;
}
}
\ No newline at end of file
export const MenuItems = [
{
title : 'Home',
url : '/',
cName : 'nav-links',
icon : 'fa-solid fa-house-user'
},
{
title : 'About',
url : '/about',
cName : 'nav-links',
icon : 'fa-solid fa-circle-info'
},
{
title : 'Service',
url : '/service',
cName : 'nav-links',
icon : 'fa-solid fa-briefcase'
},
{
title : 'Contact',
url : '/contact',
cName : 'nav-links',
icon : 'fa-solid fa-address-book'
},
{
title : 'Sign Up',
url : '/signup',
cName : 'nav-links-mobile',
},
]
import { Component } from 'react';
import './NavbarStyles.css';
import {Link} from 'react-router-dom';
import { MenuItems } from './MenuItems';
class Navbar extends Component{
state = {clicked: false};
handleClick = () => {
this.setState({clicked: !this.state.clicked})
}
render() {
return (
<div>
<nav className='NavbarItems'>
<h1 className='navbar-logo'>InsightCure®</h1>
<div className='menu-icons' onClick={this.handleClick}>
<i className={this.state.clicked ? 'fas fa-times' : 'fas fa-bars'}></i>
</div>
<ul className={this.state.clicked ? 'nav-menu active' : 'nav-menu'}>
{MenuItems.map((item, index) =>{
return(
<li key={index}>
<Link className={item.cName} to={item.url}>
<i className={item.icon}></i>{item.title}</Link>
</li>
);
})}
<button>Sign Up</button>
</ul>
</nav>
</div>
);
};
};
export default Navbar;
.NavbarItems{
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30px;
box-shadow: 0 5px 0 rgba(0, 0, 0, .25);
width: 100%;
height: 80px;
border-radius: 13px;
position: fixed;
left: 50%;
transform: translate(-50%);
z-index: 9999;
}
.navbar-logo{
color: #222;
font-size: 2rem;
cursor: pointer;
}
.nav-menu{
display: grid;
grid-template-columns: repeat(6, auto);
grid-gap: 10px;
list-style: none;
align-items: center;
}
.nav-links{
text-decoration: none;
color: #222;
font-size: 1.2 rem;
font-weight: 600;
padding: 0.7rem 1rem;
white-space: nowrap;
}
.nav-links i{
padding-right: 10px;
}
.nav-links:hover{
background-color: #01959a;
color: #fff;
border-radius: 4px;
transition: all 0.2s ease-in-out;
}
.nav-links-mobile{
display: none;
}
button{
padding: 0.5rem;
white-space: nowrap;
border-radius: 0.3rem;
font-size: 1rem;
font-weight: 600;
border: none;
cursor: pointer;
transition: 0.2s ease-in-out;
}
button:hover{
background-color: #151516;
color: #fff;
}
.menu-icons{
display: none;
}
@media screen and (max-width: 850px) {
.NavbarItems{
z-index: 99;
}
.nav-menu{
display: flex;
flex-direction: column;
justify-content: flex-start;
background: #fff;
width: 100%;
height: auto;
position: absolute;
top: 0;
left: -100%;
opacity: 0;
align-items: stretch;
/* left right up down*/
padding: 80px 0 30px 0;
margin: 0;
transition: 0.3s ease-in-out;
border-radius: 13px;
}
.nav-menu.active{
left: 0;
opacity: 1;
z-index: -1;
transition: 0.3s ease-in-out;
}
.nav-links{
display: block;
width: 100%;
font-size: 1.2rem;
padding: 2rem 0;
}
.nav-links:hover{
background: #01959a;
transition: none;
}
button{
display: none;
}
.nav-links-mobile{
display: block;
text-align: center;
padding: 1.5rem;
margin: auto;
border-radius: 4px;
width: 80%;
background:#01959a;
text-decoration: none;
color: #fff;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 2px;
}
.menu-icons{
display: block;
cursor: pointer;
}
.menu-icons i{
font-size: 1.2rem;
color: #222;
}
}
\ No newline at end of file
import React from 'react';
import './test.css';
export default function Test() {
return (
<div className='about-container'>
<h1>Our History</h1>
</div>
)
}
\ No newline at end of file
.about-container{
margin: 4rem 6rem;
text-align: start;
}
.about-container h1{
padding-bottom: 1rem;
}
.about-container p{
padding-bottom: 2rem;
}
@media screen and (max-width: 850px) {
.about-container{
margin: 4rem 2rem;
}
}
\ No newline at end of file
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
reportWebVitals();
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
import React from 'react';
import Navbar from '../components/Navbar';
import Hero from '../components/Hero';
import AboutImg from '../assets/night.jpg'
import Footer from '../components/Footer';
import AboutUs from '../components/AboutUs';
export default function About() {
return (
<>
<Navbar/>
<Hero
cName='hero-mid'
heroImg={AboutImg}
title='About'
url='/'
btnClass=''hide
/>
<AboutUs/>
<Footer/>
</>
)
}
import React from 'react';
import Navbar from '../components/Navbar';
import Hero from '../components/Hero';
import ContactImg from '../assets/2.jpg'
import Footer from '../components/Footer';
import ContactForm from '../components/ContactForm';
export default function Service() {
return (
<>
<Navbar/>
<Hero
cName='hero-mid'
heroImg={ContactImg}
title='Contact'
url='/'
btnClass=''hide
/>
<ContactForm/>
<Footer/>
</>
)
}
\ No newline at end of file
import React from 'react';
import Navbar from '../components/Navbar';
import Hero from '../components/Hero';
import homeImg from '../assets/12.jpg'
import Destination from '../components/Destination';
import Trip from '../components/Features';
import Footer from '../components/Footer';
function Home(){
return(
<>
<Navbar/>
<Hero
cName='hero'
heroImg={homeImg}
title='Your Journey Your Story'
text='Choose your Favorite Destination.'
buttonText='Travel Plan'
url='/'
btnClass='show'
/>
<Destination/>
<Trip/>
<Footer/>
</>
);
}
export default Home;
\ No newline at end of file
import React from 'react';
import Navbar from '../components/Navbar';
import Hero from '../components/Hero';
import ServiceImg from '../assets/3.jpg'
import Footer from '../components/Footer';
import Trip from '../components/Features';
export default function Service() {
return (
<>
<Navbar/>
<Hero
// cName='hero-mid'
// heroImg={ServiceImg}
// title='Service'
url='/'
btnClass=''hide
/>
<Trip/>
<Footer/>
</>
);
}
\ No newline at end of file
import React from 'react';
import Navbar from '../components/Navbar';
import Hero from '../components/Hero';
import AboutImg from '../assets/night.jpg'
import Footer from '../components/Footer';
import Test from '../components/Test';
export default function Test1() {
return (
<>
<Navbar/>
<Hero
// cName='hero-mid'
// heroImg={AboutImg}
// title='Tefwddddddddddddddddddds'
url='/'
btnClass=''hide
/>
<Test/>
<Footer/>
</>
)
}
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment