website-new/frontend/src/App.js

import React, { useEffect, lazy, Suspense, useRef, useState } from 'react';
import './App.css';
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import Navigation from './components/shared/Navigation';
import Footer from './components/shared/Footer';
import Loader from './components/shared/Loader';
import ScrollToTop from './components/root/ScrollToTop';

import routes from './routes';


const Home = lazy(() => import('./pages/Home'));
const Portfolio = lazy(() => import('./pages/Portfolio'));
const Services = lazy(() => import('./pages/Services'));
const Careers = lazy(() => import('./pages/Careers'));
const About = lazy(() => import('./pages/About'));
const BlogPost = lazy(() => import('./components/BlogPost'));
const ProcessPage = lazy(() => import('./pages/ProcessPage'));
const ContactPage = lazy(() => import('./pages/ContactPage'));
const CaseStudyBI = lazy(() => import('./pages/CaseStudyBI'));
const CaseStudyFinantial = lazy(() => import('./pages/CaseStudyFinantial'));
const CaseStudyTicketing = lazy(() => import('./pages/CaseStudyTicketing'));
const CaseStudyCentralized = lazy(() => import('./pages/CaseStudyCentralized'));
const CaseStudyResource = lazy(() => import('./pages/CaseStudyResource'));
const CaseStudyStrata = lazy(() => import('./pages/CaseStudyStrata'));
const PrivacyPolicy = lazy(() => import('./pages/PrivacyPolicy'));
const WorkWithUs = lazy(() => import('./pages/WorkWithUs'));

// Navigation Links
const links = routes.filter(item => item.nav === true);



function App() {
  //tabs for contact form
  const [tab, setTab] = useState(true);
  const [tabTitle, setTabTitle] = useState('Tell Us About Your Idea!');
  const link = useNavigate();

  //scroll to Contact segment
  const forwardedRef = useRef(null);

  //initialize analytics page tracking
  //usePageTracking();

  //scroll to Contact fn
  function scrollToView(event) {
    event.preventDefault();
    if (forwardedRef) {
      forwardedRef.current.scrollIntoView({ behavior: 'smooth' });
    } else {
      link('/contact');
    }
  }

  //nav active links
  function activeLinks(activePage, bool = true) {
    const text = 'text-gray-500 ';
    if (bool === true) {
      return activePage ? 'activeLink dg-primary-900 ' : text;
    } else {
      return text;
    }
  }

  return (
    <div>
      <ScrollToTop />
      <Navigation
        links={links}
        scrollToView={scrollToView}
        activeLinks={activeLinks}
        forwardedRef={forwardedRef}
      ></Navigation>
      <Suspense fallback={<Loader />}>
        <Routes>
          <Route exact path="/" element={<Home />}/>
          <Route exact path="/workwithus" element={<WorkWithUs />}/>
          <Route exact path="/portfolio" element={<Portfolio />}/>
          <Route exact path="/process" element={<ProcessPage />}/>
          <Route exact path="/careers" element={<Careers />}/>
          <Route exact path="/about" element={<About />}/>
          <Route exact path="/contact" element={<ContactPage />}/>
          <Route exact path="/casestudybi" element={<CaseStudyBI />}/>
          <Route exact path="/casestudystrata" element={<CaseStudyStrata />}/>
          <Route exact path="/casestudyfinancial" element={<CaseStudyFinantial />}/>
          <Route exact path="/casestudycentralized" element={<CaseStudyCentralized />}/>
          <Route exact path="/casestudyresource" element={<CaseStudyResource />}/>
          <Route exact path="/casestudyticketing" element={<CaseStudyTicketing />}/>
          <Route exact path="/privacypolicy" element={<PrivacyPolicy />}/>
        </Routes>
      </Suspense>

      <Footer
        links={links}
        activeLinks={activeLinks}
        scrollToView={scrollToView}
        forwardedRef={forwardedRef}
      />
    </div>
  );
}

export default App;