First commit

78e131d4 · IT20155070 · c2337dc9 · 78e131d4 · 78e131d4 · 78e131d4
Commit 78e131d4 authored Aug 28, 2023 by IT20155070
53 changed files
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "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"
+    ]
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
+<!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>
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/public/manifest.json
+++ b/public/manifest.json
+{
+  "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"
+}
--- a/public/robots.txt
+++ b/public/robots.txt
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/src/App.css
+++ b/src/App.css
+.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
--- a/src/App.js
+++ b/src/App.js
+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;
--- a/src/App.test.js
+++ b/src/App.test.js
+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();
+});
--- a/src/assets/1.jpg
+++ b/src/assets/1.jpg
--- a/src/assets/10.jpg
+++ b/src/assets/10.jpg
--- a/src/assets/11.jpg
+++ b/src/assets/11.jpg
--- a/src/assets/12.jpg
+++ b/src/assets/12.jpg
--- a/src/assets/2.jpg
+++ b/src/assets/2.jpg
--- a/src/assets/3.jpg
+++ b/src/assets/3.jpg
--- a/src/assets/4.jpg
+++ b/src/assets/4.jpg
--- a/src/assets/5.jpg
+++ b/src/assets/5.jpg
--- a/src/assets/6.jpg
+++ b/src/assets/6.jpg
--- a/src/assets/8.jpg
+++ b/src/assets/8.jpg
--- a/src/assets/9.jpg
+++ b/src/assets/9.jpg
--- a/src/assets/img.jpg
+++ b/src/assets/img.jpg
--- a/src/assets/night.jpg
+++ b/src/assets/night.jpg
--- a/src/components/AboutUs.js
+++ b/src/components/AboutUs.js
+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>
+  )
+}
--- a/src/components/AboutUsStyles.css
+++ b/src/components/AboutUsStyles.css
+.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
--- a/src/components/ContactForm.js
+++ b/src/components/ContactForm.js
+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>
+  )
+}
--- a/src/components/ContactFormStyles.css
+++ b/src/components/ContactFormStyles.css
+.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
--- a/src/components/Destination.js
+++ b/src/components/Destination.js
+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
--- a/src/components/DestinationData.js
+++ b/src/components/DestinationData.js
+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
--- a/src/components/DestinationStyles.css
+++ b/src/components/DestinationStyles.css
+.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
--- a/src/components/Features.js
+++ b/src/components/Features.js
+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
--- a/src/components/FeaturesData.js
+++ b/src/components/FeaturesData.js
+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>
+  )
+}
--- a/src/components/FeaturesStyles.css
+++ b/src/components/FeaturesStyles.css
+.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
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
+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
--- a/src/components/FooterStyles.css
+++ b/src/components/FooterStyles.css
+.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
--- a/src/components/Hero.js
+++ b/src/components/Hero.js
+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
--- a/src/components/HeroStyles.css
+++ b/src/components/HeroStyles.css
+.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
--- a/src/components/MenuItems.js
+++ b/src/components/MenuItems.js
+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',
+    },
+
+]
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
+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;        
--- a/src/components/NavbarStyles.css
+++ b/src/components/NavbarStyles.css
+.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
--- a/src/components/Test.js
+++ b/src/components/Test.js
+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
--- a/src/components/test.css
+++ b/src/components/test.css
+.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
--- a/src/index.css
+++ b/src/index.css
+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;
+}
--- a/src/index.js
+++ b/src/index.js
+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();
--- a/src/logo.svg
+++ b/src/logo.svg
+<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
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
+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;
--- a/src/routes/About.js
+++ b/src/routes/About.js
+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/>
+        </>
+  )
+}
--- a/src/routes/Contact.js
+++ b/src/routes/Contact.js
+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
--- a/src/routes/Home.js
+++ b/src/routes/Home.js
+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
--- a/src/routes/Service.js
+++ b/src/routes/Service.js
+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
--- a/src/routes/Test.js
+++ b/src/routes/Test.js
+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/>
+        </>
+  )
+}
--- a/src/setupTests.js
+++ b/src/setupTests.js
+// 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';