Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixing the navigation of to a new page book a spage button #127

Merged
merged 2 commits into from
Oct 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 26 additions & 26 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,39 +1,39 @@
import Home from './Home';
import ScrollIndicator from './ScrollIndicator';
import PreloaderContainer from './PreloaderContainer.js'; // For Preloader
import './style.css';
import './script.js';
import './preloader.js';
import './TopBar.js';
import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
import Modal from './Modal';
import Services from "./Pages/Services/Services";
import Blogs from "./Pages/Blogs/Blogs";
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
import Home from "./Home";
import BlogPost from "./Pages/Blogs/BlogPost";
import Contact from './Pages/Contact/Contact';
import Blogs from "./Pages/Blogs/Blogs";
import Contact from "./Pages/Contact/Contact";
import Image from "./Pages/Photos/Photos.js";


import Services from "./Pages/Services/Services";
import "./preloader.js";
import PreloaderContainer from "./PreloaderContainer.js"; // For Preloader
import "./script.js";
import ScrollIndicator from "./ScrollIndicator";
import "./style.css";
import "./TopBar.js";

function App() {
return (
<div className="App">
<ScrollIndicator />
<PreloaderContainer>
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/services" element={<Services />} />
<Route path="/blogs" element={<Blogs />} />
<Route path="/blogs/:id" element={<BlogPost />} />
<Route path="/photos" element={<Image />} />
<Route path="/contact" element={<Contact />} />

</Routes>
</Router>
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/services" element={<Services />} />
<Route path="/blogs" element={<Blogs />} />
<Route path="/blogs/:id" element={<BlogPost />} />
<Route path="/photos" element={<Image />} />
<Route path="/contact" element={<Contact />} />
<Route
path="/book-a-space"
element={"This Page is under construction"}
/>
</Routes>
</Router>
</PreloaderContainer>
</div>
);
}

export default App;
export default App;
84 changes: 59 additions & 25 deletions src/Home.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import React from "react";
import { useNavigate } from "react-router-dom";
import ReactTypingEffect from "react-typing-effect";
import facebookIcon from "./images/facebook.svg"
import instagramIcon from "./images/instagram.svg"
import twitterIcon from "./images/twitter.svg"
import youtubeIcon from "./images/youtube.svg"
import mapsIcon from "./images/maps.svg"
import facebookIcon from "./images/facebook.svg";
import instagramIcon from "./images/instagram.svg";
import mapsIcon from "./images/maps.svg";
import twitterIcon from "./images/twitter.svg";
import youtubeIcon from "./images/youtube.svg";
import Navbar from "./Navbar";
import FAQ from "./Pages/FAQ/FAQ";
const Home = () => {
const navigate = useNavigate();
return (
<div>
<Navbar />
Expand Down Expand Up @@ -57,7 +59,10 @@ const Home = () => {
<p className="body-2 hero-text slider-reveal">
Best working environment that suits your business needs.
</p>
<a href="https://603interiorlayout.netlify.app/" className="btn btn-primary slider-reveal">
<a
href="https://603interiorlayout.netlify.app/"
className="btn btn-primary slider-reveal"
>
<span className="text text-1">Make Your Space</span>
<span className="text text-2" aria-hidden="true">
Make Your Space
Expand Down Expand Up @@ -86,7 +91,10 @@ const Home = () => {
Spaces that are occupied by Corporates and Start ups, designed
with your business in mind
</p>
<a href="https://603interiorlayout.netlify.app/" className="btn btn-primary slider-reveal">
<a
href="https://603interiorlayout.netlify.app/"
className="btn btn-primary slider-reveal"
>
<span className="text text-1">Make Your Space</span>
<span className="text text-2" aria-hidden="true">
Make Your Space
Expand Down Expand Up @@ -114,7 +122,10 @@ const Home = () => {
Come with your team & experience the joy of inspiring office
design.
</p>
<a href="https://603interiorlayout.netlify.app/" className="btn btn-primary slider-reveal">
<a
href="https://603interiorlayout.netlify.app/"
className="btn btn-primary slider-reveal"
>
<span className="text text-1">Make Your Space</span>
<span className="text text-2" aria-hidden="true">
Make Your Space
Expand All @@ -136,15 +147,17 @@ const Home = () => {
>
<ion-icon name="chevron-forward"></ion-icon>
</button>
<a href="indexLayout.html" className="hero-btn has-after">
<img
src="./images/hero-icon.png"
width="48"
height="48"
alt="booking icon"
/>
<span className="label-2 text-center span">Book A Space</span>
</a>
<button onClick={(e) => navigate("/book-a-space")}>
<a className="hero-btn has-after">
<img
src="./images/hero-icon.png"
width="48"
height="48"
alt="booking icon"
/>
<span className="label-2 text-center span">Book A Space</span>
</a>
</button>
</section>
<section
id="spaces"
Expand Down Expand Up @@ -514,7 +527,10 @@ const Home = () => {
</a>
</li>
<li>
<a href="/#about" className="label-2 footer-link hover-underline">
<a
href="/#about"
className="label-2 footer-link hover-underline"
>
About Us
</a>
</li>
Expand All @@ -524,11 +540,14 @@ const Home = () => {
</a>
</li>
<li>
<a href="/Contact" className="label-2 footer-link hover-underline">
<a
href="/Contact"
className="label-2 footer-link hover-underline"
>
Contact
</a>
</li>
</ul>
</ul>
<a href="#" className="logo">
<img
src="./images/603logo (1).avif"
Expand Down Expand Up @@ -582,27 +601,42 @@ const Home = () => {
<ul className="footer-list">
<p className="title-1">Follow us on: </p>
<li>
<a href="https://www.facebook.com/" className="label-2 footer-link">
<a
href="https://www.facebook.com/"
className="label-2 footer-link"
>
<img className="img-height" src={facebookIcon} />
</a>
</li>
<li>
<a href="https://www.instagram.com/603thecoworkingspace/" className="label-2 footer-link">
<a
href="https://www.instagram.com/603thecoworkingspace/"
className="label-2 footer-link"
>
<img className="img-height" src={instagramIcon} />
</a>
</li>
<li>
<a href="https://x.com/603coworking" className="label-2 footer-link">
<a
href="https://x.com/603coworking"
className="label-2 footer-link"
>
<img className="img-height" src={twitterIcon} />
</a>
</li>
<li>
<a href="https://www.youtube.com/" className="label-2 footer-link">
<a
href="https://www.youtube.com/"
className="label-2 footer-link"
>
<img className="img-height" src={youtubeIcon} />
</a>
</li>
<li>
<a href="https://www.google.com/maps" className="label-2 footer-link">
<a
href="https://www.google.com/maps"
className="label-2 footer-link"
>
<img className="img-height map" src={mapsIcon} />
</a>
</li>
Expand Down
Loading