Merge pull request #98 from hazraChandrima/main

added Interactive Services page with same UI as Home page

.gitignore

@@ -17,7 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
-
+.idea
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

package.json

@@ -9,7 +9,7 @@
     "ionicons": "^7.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.1",
+    "react-router-dom": "^6.26.2",
     "react-scripts": "^5.0.1",
     "react-typing-effect": "^2.0.5",
     "web-vitals": "^2.1.4"

src/App.js

@@ -5,15 +5,22 @@ 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";
 
 
 function App() {
   return (
     <div className="App">
       <ScrollIndicator />
       <PreloaderContainer>
-        <Home />
+          <Router>
+              <Routes>
+                  <Route path="/" element={<Home />} />
+                  <Route path="/services" element={<Services />} />
+              </Routes>
+          </Router>
       </PreloaderContainer>
     </div>
   );

src/Navbar.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import Modal from './Modal'; // Import the modal component
+import {useLocation} from "react-router-dom";
 
 function Navbar() {
   const [prevScrollPos, setPrevScrollPos] = useState(window.scrollY);
@@ -8,6 +9,8 @@ function Navbar() {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false); // Modal state
 
+  const location = useLocation();
+
   useEffect(() => {
     const handleScroll = () => {
       const currentScrollPos = window.scrollY;
@@ -26,6 +29,17 @@ function Navbar() {
     return () => window.removeEventListener('scroll', handleScroll);
   }, [prevScrollPos]);
 
+  // for scrolling smoothly to each relevant section in home page
+  useEffect(() =>{
+    if(location.hash){
+      const sectionId = location.hash.replace("#","");
+      const section = document.getElementById(sectionId);
+      if(section){
+        section.scrollIntoView({behavior: 'smooth'});
+      }
+    }
+  },[location]);
+
   const toggleMenu = () => {
     setIsMenuOpen(!isMenuOpen);
   };
@@ -35,6 +49,9 @@ function Navbar() {
     setIsModalOpen(!isModalOpen);
   };
 
+  const isHomeOpen = location.pathname === '/';
+  const isServicesOpen = location.pathname === '/services';
+
   return (
     <>
       <header
@@ -64,6 +81,7 @@ function Navbar() {
               className="logohover"
             />
           </a>
+
           <nav className={`navbar ${isMenuOpen ? 'active' : ''}`} data-navbar>
             <button className="close-btn" aria-label="close menu" onClick={toggleMenu}>
               <ion-icon name="close-outline" aria-hidden="true"></ion-icon>
@@ -73,37 +91,43 @@ function Navbar() {
             </a>
             <ul className="navbar-list">
               <li className="navbar-item">
-                <a href="#home" className="navbar-link hover-underline active">
+                <a href="/" className={`navbar-link hover-underline ${isHomeOpen ? 'active' : ''}`}>
                   <div className="separator"></div>
                   <span className="span">Home</span>
                 </a>
               </li>
               <li className="navbar-item">
-                <a href="#spaces" className="navbar-link hover-underline">
+                <a href="/#spaces" className="navbar-link hover-underline">
                   <div className="separator"></div>
                   <span className="span">Spaces</span>
                 </a>
               </li>
               <li className="navbar-item">
-                <a href="#about" className="navbar-link hover-underline">
+                <a href="/#about" className="navbar-link hover-underline">
                   <div className="separator"></div>
                   <span className="span">About Us</span>
                 </a>
               </li>
               <li className="navbar-item">
-                <a href="#" className="navbar-link hover-underline">
+                <a href="/services" className={`navbar-link hover-underline ${isServicesOpen ? 'active' : ''}`}>
+                  <div className="separator"></div>
+                  <span className="span">Our Services</span>
+                </a>
+              </li>
+              <li className="navbar-item">
+                <a href="/#" className="navbar-link hover-underline">
                   <div className="separator"></div>
                   <span className="span">Images</span>
                 </a>
               </li>
               <li className="navbar-item">
-                <a href="#" className="navbar-link hover-underline">
+                <a href="/#" className="navbar-link hover-underline">
                   <div className="separator"></div>
                   <span className="span">Contact</span>
                 </a>
               </li>
               <li className="navbar-item">
-                <a href="#" className="navbar-link hover-underline" onClick={toggleModal}>
+                <a href="/#" className="navbar-link hover-underline" onClick={toggleModal}>
                   <div className="separator"></div>
                   <span className="span">Login</span>
                 </a>
@@ -112,7 +136,7 @@ function Navbar() {
             <div className="text-center">
               <p className="headline-1 navbar-title">Visit Us</p>
               <address className="body-4">
-                Restaurant St, Delicious City, <br />
+                Restaurant St, Delicious City, <br/>
                 London 9578, UK
               </address>
               <p className="body-4 navbar-text">Open: 9.30 am - 2.30 pm</p>

src/Pages/Services/Services.css

@@ -0,0 +1,45 @@
+.heroText {
+    position: absolute;
+    z-index: 2;
+    text-align: center;
+    width: 100%;
+    font-weight: var(--weight-regular);
+    font-family: Lora;
+    font-size: 13rem;
+    top: 34%;
+    color: white;
+}
+
+.serviceImg {
+    object-fit: cover;
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+}
+
+.serviceImg.fade-in {
+    opacity: 1;
+}
+
+@keyframes zoom {
+    from {
+        transform: scale(1);
+    }
+    to {
+        transform: scale(1.1);
+    }
+}
+
+.serviceImg.zoom {
+    animation: zoom 5s infinite alternate;
+}
+
+ul.bullets {
+    margin: 3rem 0;
+    list-style-type: disc;
+}
+
+
+.reverse{
+    margin-left: 5rem;
+}
+