Refactoring because of local scripts and tabs #9
14 changed files with 393 additions and 380 deletions
|
|
@ -1,15 +1,11 @@
|
|||
import React, { useState, useEffect, Component } from 'react';
|
||||
import Navbar from './components/Navbar';
|
||||
import './App.css';
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Switch,
|
||||
Route
|
||||
} from 'react-router-dom';
|
||||
import Home from './components/pages/Home';
|
||||
import Services from './components/pages/Services';
|
||||
import Products from './components/pages/Products';
|
||||
import SignUp from './components/pages/SignUp';
|
||||
import React, { useState, useEffect, Component } from "react";
|
||||
import Navbar from "./components/Navbar";
|
||||
import "./App.css";
|
||||
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
|
||||
import Home from "./components/pages/Home";
|
||||
import Services from "./components/pages/Services";
|
||||
import Products from "./components/pages/Products";
|
||||
import SignUp from "./components/pages/SignUp";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
|
|
@ -17,14 +13,14 @@ function App() {
|
|||
<Router>
|
||||
<Navbar />
|
||||
<Switch>
|
||||
<Route path='/' exact component={Home} />
|
||||
<Route path='/services' component={Services} />
|
||||
<Route path='/products' component={Products} />
|
||||
<Route path='sign-up' component={SignUp} />
|
||||
<Route path="/" exact component={Home} />
|
||||
<Route path="/services" component={Services} />
|
||||
<Route path="/products" component={Products} />
|
||||
<Route path="/sign-up" component={SignUp} />
|
||||
</Switch>
|
||||
</Router>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default App;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from "react";
|
|||
import { Button } from "./components/Button";
|
||||
import { Link } from "react-router-dom";
|
||||
import "./Footer.css";
|
||||
import "@fortawesome/fontawesome-free/css/all.css"
|
||||
import "@fortawesome/fontawesome-free/css/all.css";
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
|
|
@ -65,37 +65,40 @@ function Footer() {
|
|||
</div>
|
||||
</div>
|
||||
<section className="social-media">
|
||||
<div className="social-media-wrap">
|
||||
<div className="footer-logo">
|
||||
<Link to='/' className="social-logo">
|
||||
TRVL <i className="fab fa-typo3"></i>
|
||||
</Link>
|
||||
</div>
|
||||
<small className="website-rights">TRVL © 2</small>
|
||||
<div className="social-icons">
|
||||
<Link className="social-icon-link facebook"
|
||||
to='/'
|
||||
target="_blank"
|
||||
aria-label="Facebook"
|
||||
>
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</Link>
|
||||
<Link className="social-icon-link instagram"
|
||||
to='/'
|
||||
target="_blank"
|
||||
aria-label="Instagram"
|
||||
>
|
||||
<i className="fab fa-instagram"></i>
|
||||
</Link>
|
||||
<Link className="social-icon-link linkedin"
|
||||
to='/'
|
||||
target="_blank"
|
||||
aria-label="LinkedIn"
|
||||
>
|
||||
<i className="fab fa-linkedin"></i>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="social-media-wrap">
|
||||
<div className="footer-logo">
|
||||
<Link to="/" className="social-logo">
|
||||
TRVL <i className="fab fa-typo3"></i>
|
||||
</Link>
|
||||
</div>
|
||||
<small className="website-rights">TRVL © 2</small>
|
||||
<div className="social-icons">
|
||||
<Link
|
||||
className="social-icon-link facebook"
|
||||
to="/"
|
||||
target="_blank"
|
||||
aria-label="Facebook"
|
||||
>
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</Link>
|
||||
<Link
|
||||
className="social-icon-link instagram"
|
||||
to="/"
|
||||
target="_blank"
|
||||
aria-label="Instagram"
|
||||
>
|
||||
<i className="fab fa-instagram"></i>
|
||||
</Link>
|
||||
<Link
|
||||
className="social-icon-link linkedin"
|
||||
to="/"
|
||||
target="_blank"
|
||||
aria-label="LinkedIn"
|
||||
>
|
||||
<i className="fab fa-linkedin"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,44 +1,43 @@
|
|||
:root {
|
||||
--primary: #fff;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 20px;
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
background-color: var(--primary);
|
||||
color: #242424;
|
||||
border: 1px solid var(--primary);
|
||||
}
|
||||
|
||||
.btn--outline {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
padding: 8px 20px;
|
||||
border: 1px solid var(--primary);
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.btn--medium {
|
||||
padding: 8px 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn--large {
|
||||
padding: 12px 26px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.btn--large:hover,
|
||||
.btn--medium:hover {
|
||||
transition: all 0.3s ease-out;
|
||||
background: #fff;
|
||||
color: #242424;
|
||||
transition: 250ms;
|
||||
}
|
||||
|
||||
--primary: #fff;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 20px;
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
background-color: var(--primary);
|
||||
color: #242424;
|
||||
border: 1px solid var(--primary);
|
||||
}
|
||||
|
||||
.btn--outline {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
padding: 8px 20px;
|
||||
border: 1px solid var(--primary);
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.btn--medium {
|
||||
padding: 8px 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn--large {
|
||||
padding: 12px 26px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.btn--large:hover,
|
||||
.btn--medium:hover {
|
||||
transition: all 0.3s ease-out;
|
||||
background: #fff;
|
||||
color: #242424;
|
||||
transition: 250ms;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,32 @@
|
|||
import React from 'react';
|
||||
import './Button.css';
|
||||
import { Link } from 'react-router-dom';
|
||||
import React from "react";
|
||||
import "./Button.css";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const STYLES = ['btn--primary', 'btn--outline'];
|
||||
const STYLES = ["btn--primary", "btn--outline"];
|
||||
|
||||
const SIZES = ['btn--medium', 'btn--large'];
|
||||
const SIZES = ["btn--medium", "btn--large"];
|
||||
export const Button = ({
|
||||
children,
|
||||
type,
|
||||
onClick,
|
||||
buttonStyle,
|
||||
buttonSize
|
||||
children,
|
||||
type,
|
||||
onClick,
|
||||
buttonStyle,
|
||||
buttonSize,
|
||||
}) => {
|
||||
const checkButtonStyle = STYLES.includes(buttonStyle)
|
||||
? buttonStyle
|
||||
: STYLES[0];
|
||||
|
||||
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
|
||||
const checkButtonStyle = STYLES.includes(buttonStyle)
|
||||
? buttonStyle
|
||||
: STYLES[0];
|
||||
|
||||
return (
|
||||
<Link to='sign-up' className='btn-mobile'>
|
||||
<button
|
||||
className={`btn ${checkButtonStyle} ${checkButtonSize}`}
|
||||
onClick={onClick}
|
||||
type={type}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
|
||||
|
||||
return (
|
||||
<Link to="sign-up" className="btn-mobile">
|
||||
<button
|
||||
className={`btn ${checkButtonStyle} ${checkButtonSize}`}
|
||||
onClick={onClick}
|
||||
type={type}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,21 +1,25 @@
|
|||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
function CardItem(props) {
|
||||
return (
|
||||
<>
|
||||
<li className="cards__item">
|
||||
<Link className="cards__item__link" to={props.path}>
|
||||
<figure className="cards__item__pic-wrap" data-category={props.label}>
|
||||
<img src={props.src} alt="Travel Image" className="cards__item__img" />
|
||||
</figure>
|
||||
<div className="cards__item__info">
|
||||
<h5 className="cards__item__text">{props.text}</h5>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<li className="cards__item">
|
||||
<Link className="cards__item__link" to={props.path}>
|
||||
<figure className="cards__item__pic-wrap" data-category={props.label}>
|
||||
<img
|
||||
src={props.src}
|
||||
alt="Travel Image"
|
||||
className="cards__item__img"
|
||||
/>
|
||||
</figure>
|
||||
<div className="cards__item__info">
|
||||
<h5 className="cards__item__text">{props.text}</h5>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default CardItem
|
||||
export default CardItem;
|
||||
|
|
|
|||
|
|
@ -1,119 +1,118 @@
|
|||
.cards {
|
||||
padding: 4rem;
|
||||
background: #fff;
|
||||
padding: 4rem;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cards__container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
max-width: 1120px;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cards__wrapper {
|
||||
position: relative;
|
||||
margin: 50px 0 45px;
|
||||
}
|
||||
|
||||
.cards__items {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.cards__item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin: 0 1rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.cards__item__link {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: 100%;
|
||||
box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
|
||||
-webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
|
||||
filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cards__item__pic-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 67%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fade-img {
|
||||
animation-name: fade-img;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
.cards__item__pic-wrap::after {
|
||||
content: attr(data-category);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin-left: 10px;
|
||||
padding: 6px 8px;
|
||||
max-width: calc((100%) - 60px);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background-color: #1f98f4;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cards__item__img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: cover;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
.cards__item__img:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.cards__item__info {
|
||||
padding: 20px 30px 30px;
|
||||
}
|
||||
|
||||
.cards__item__text {
|
||||
color: #252e48;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.content__blog__container {
|
||||
width: 84%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cards__container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
max-width: 1120px;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cards__wrapper {
|
||||
position: relative;
|
||||
margin: 50px 0 45px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.cards__items {
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.cards__item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin: 0 1rem;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cards__item__link {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: 100%;
|
||||
box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
|
||||
-webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
|
||||
filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cards__item__pic-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 67%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fade-img {
|
||||
animation-name: fade-img;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
.cards__item__pic-wrap::after {
|
||||
content: attr(data-category);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin-left: 10px;
|
||||
padding: 6px 8px;
|
||||
max-width: calc((100%) - 60px);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background-color: #1f98f4;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cards__item__img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: cover;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
.cards__item__img:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.cards__item__info {
|
||||
padding: 20px 30px 30px;
|
||||
}
|
||||
|
||||
.cards__item__text {
|
||||
color: #252e48;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.content__blog__container {
|
||||
width: 84%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.cards__items {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.cards__item {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,51 @@
|
|||
import React from 'react'
|
||||
import CardItem from './CardItem'
|
||||
import './Cards.css'
|
||||
import React from "react";
|
||||
import CardItem from "./CardItem";
|
||||
import "./Cards.css";
|
||||
|
||||
function Cards() {
|
||||
return (
|
||||
<div className='cards'>
|
||||
<h1>Check out these EPIC Destinations</h1>
|
||||
<div className="cards__container">
|
||||
<div className="cards__wrapper">
|
||||
<ul className="cards__items">
|
||||
<CardItem
|
||||
src="/images/img-4.jpg"
|
||||
text="Explore the hidden waterfall deep inside the Amazon Jungle"
|
||||
label="Adventure"
|
||||
path="/services"
|
||||
/>
|
||||
<CardItem
|
||||
src="/images/img-4.jpg"
|
||||
text="Travel through the Islands of Bali in a Private Cruise"
|
||||
label="Luxury"
|
||||
path="/services"
|
||||
/>
|
||||
</ul>
|
||||
<ul className="cards__items">
|
||||
<CardItem
|
||||
src="/images/img-4.jpg"
|
||||
text="Explore the hidden waterfall deep inside the Amazon Jungle"
|
||||
label="Adventure"
|
||||
path="/services"
|
||||
/>
|
||||
<CardItem
|
||||
src="/images/img-4.jpg"
|
||||
text="Travel through the Islands of Bali in a Private Cruise"
|
||||
label="Luxury"
|
||||
path="/services"
|
||||
/>
|
||||
<CardItem
|
||||
src="/images/img-4.jpg"
|
||||
text="Travel through the Islands of Bali in a Private Cruise"
|
||||
label="Luxury"
|
||||
path="/services"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className="cards">
|
||||
<h1>Check out these EPIC Destinations</h1>
|
||||
<div className="cards__container">
|
||||
<div className="cards__wrapper">
|
||||
<ul className="cards__items">
|
||||
<CardItem
|
||||
src="/images/img-4.jpg"
|
||||
text="Explore the hidden waterfall deep inside the Amazon Jungle"
|
||||
label="Adventure"
|
||||
path="/services"
|
||||
/>
|
||||
<CardItem
|
||||
src="/images/img-4.jpg"
|
||||
text="Travel through the Islands of Bali in a Private Cruise"
|
||||
label="Luxury"
|
||||
path="/services"
|
||||
/>
|
||||
</ul>
|
||||
<ul className="cards__items">
|
||||
<CardItem
|
||||
src="/images/img-4.jpg"
|
||||
text="Explore the hidden waterfall deep inside the Amazon Jungle"
|
||||
label="Adventure"
|
||||
path="/services"
|
||||
/>
|
||||
<CardItem
|
||||
src="/images/img-4.jpg"
|
||||
text="Travel through the Islands of Bali in a Private Cruise"
|
||||
label="Luxury"
|
||||
path="/services"
|
||||
/>
|
||||
<CardItem
|
||||
src="/images/img-4.jpg"
|
||||
text="Travel through the Islands of Bali in a Private Cruise"
|
||||
label="Luxury"
|
||||
path="/services"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Cards
|
||||
export default Cards;
|
||||
|
|
|
|||
|
|
@ -1,32 +1,31 @@
|
|||
import React from 'react';
|
||||
import '../App.css';
|
||||
import { Button } from './Button';
|
||||
import './HeroSection.css';
|
||||
import '@fortawesome/fontawesome-free/css/all.css'
|
||||
import React from "react";
|
||||
import "../App.css";
|
||||
import { Button } from "./Button";
|
||||
import "./HeroSection.css";
|
||||
import "@fortawesome/fontawesome-free/css/all.css";
|
||||
|
||||
function HeroSection() {
|
||||
return (
|
||||
<div className='hero-container'>
|
||||
<h1>ADVENTURE wartet</h1>
|
||||
<p>What are you waiting for?</p>
|
||||
<div className="hero-btns">
|
||||
<Button
|
||||
className='btns'
|
||||
buttonStyle='btn--outline'
|
||||
buttonSize='btn--large'
|
||||
>
|
||||
GET STARTED
|
||||
</Button>
|
||||
<Button
|
||||
className='btns'
|
||||
buttonStyle='btn--primary'
|
||||
buttonSize='btn--large'
|
||||
>
|
||||
WATCH TRAILER <i className='far fa-play-circle' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="hero-container">
|
||||
<h1>Herzlich Willkommen</h1>
|
||||
<div className="hero-btns">
|
||||
<Button
|
||||
className="btns"
|
||||
buttonStyle="btn--outline"
|
||||
buttonSize="btn--large"
|
||||
>
|
||||
GET STARTED
|
||||
</Button>
|
||||
<Button
|
||||
className="btns"
|
||||
buttonStyle="btn--primary"
|
||||
buttonSize="btn--large"
|
||||
>
|
||||
WATCH TRAILER <i className="far fa-play-circle" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeroSection
|
||||
export default HeroSection;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Button } from './Button';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './Navbar.css';
|
||||
import '@fortawesome/fontawesome-free/css/all.css'
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Button } from "./Button";
|
||||
import { Link } from "react-router-dom";
|
||||
import "./Navbar.css";
|
||||
import "@fortawesome/fontawesome-free/css/all.css";
|
||||
|
||||
function Navbar() {
|
||||
const [click, setClick] = useState(false);
|
||||
|
|
@ -24,38 +24,38 @@ function Navbar() {
|
|||
showButton();
|
||||
}, []);
|
||||
|
||||
window.addEventListener('resize', showButton);
|
||||
window.addEventListener("resize", showButton);
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className='navbar'>
|
||||
<div className='navbar-container'>
|
||||
<Link to='/' className='navbar-logo' onClick={closeMobileMenu}>
|
||||
<nav className="navbar">
|
||||
<div className="navbar-container">
|
||||
<Link to="/" className="navbar-logo" onClick={closeMobileMenu}>
|
||||
TRVL
|
||||
<i class='fab fa-typo3' />
|
||||
<i class="fab fa-typo3" />
|
||||
</Link>
|
||||
<div className='menu-icon' onClick={handleClick}>
|
||||
<i className={click ? 'fas fa-times' : 'fas fa-bars'} />
|
||||
<div className="menu-icon" onClick={handleClick}>
|
||||
<i className={click ? "fas fa-times" : "fas fa-bars"} />
|
||||
</div>
|
||||
<ul className={click ? 'nav-menu active' : 'nav-menu'}>
|
||||
<li className='nav-item'>
|
||||
<Link to='/' className='nav-links' onClick={closeMobileMenu}>
|
||||
<ul className={click ? "nav-menu active" : "nav-menu"}>
|
||||
<li className="nav-item">
|
||||
<Link to="/" className="nav-links" onClick={closeMobileMenu}>
|
||||
Home
|
||||
</Link>
|
||||
</li>
|
||||
<li className='nav-item'>
|
||||
<li className="nav-item">
|
||||
<Link
|
||||
to='/services'
|
||||
className='nav-links'
|
||||
to="/services"
|
||||
className="nav-links"
|
||||
onClick={closeMobileMenu}
|
||||
>
|
||||
Services
|
||||
</Link>
|
||||
</li>
|
||||
<li className='nav-item'>
|
||||
<li className="nav-item">
|
||||
<Link
|
||||
to='/products'
|
||||
className='nav-links'
|
||||
to="/products"
|
||||
className="nav-links"
|
||||
onClick={closeMobileMenu}
|
||||
>
|
||||
Products
|
||||
|
|
@ -64,15 +64,15 @@ function Navbar() {
|
|||
|
||||
<li>
|
||||
<Link
|
||||
to='/sign-up'
|
||||
className='nav-links-mobile'
|
||||
to="/sign-up"
|
||||
className="nav-links-mobile"
|
||||
onClick={closeMobileMenu}
|
||||
>
|
||||
Sign Up
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
{button && <Button buttonStyle='btn--outline'>SIGN UP</Button>}
|
||||
{button && <Button buttonStyle="btn--outline">SIGN UP</Button>}
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
import React from 'react';
|
||||
import '../../App.css'
|
||||
import HeroSection from '../HeroSection'
|
||||
import Cards from '../Cards'
|
||||
import Footer from '../../Footer';
|
||||
import React from "react";
|
||||
import "../../App.css";
|
||||
import HeroSection from "../HeroSection";
|
||||
import Cards from "../Cards";
|
||||
import Footer from "../../Footer";
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<>
|
||||
<HeroSection />
|
||||
<Cards />
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<HeroSection />
|
||||
<Cards />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
export default Home;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
import React from 'react'
|
||||
import '../../App.css'
|
||||
import React from "react";
|
||||
import "../../App.css";
|
||||
import Footer from "../../Footer";
|
||||
|
||||
export default function Products() {
|
||||
return (
|
||||
<h1 className='products'>PRODUCTS</h1>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<h1 className="products">PRODUCTS</h1>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
import React from 'react'
|
||||
import '../../App.css'
|
||||
import React from "react";
|
||||
import "../../App.css";
|
||||
import Footer from "../../Footer";
|
||||
|
||||
export default function Services() {
|
||||
return <h1 className="services">SERVICES</h1>;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<h1 className="services">SERVICES</h1>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
import React from 'react'
|
||||
import '../../App.css'
|
||||
import React from "react";
|
||||
import "../../App.css";
|
||||
import Footer from "../../Footer";
|
||||
|
||||
export default function SignUp() {
|
||||
return <h1 className="sign-up">SIGN UP</h1>;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<h1 className="sign-up">SIGN UP</h1>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import App from "./App";
|
||||
|
||||
ReactDOM.render(
|
||||
<App />,
|
||||
document.getElementById('root')
|
||||
);
|
||||
ReactDOM.render(<App />, document.getElementById("root"));
|
||||
|
|
|
|||
Loading…
Reference in a new issue