3 år sedan · a7f5c71fbe
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
 {
  "name": "frontend",
  "version": "1.0.13",
  "version": "1.0.18",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "frontend",
      "version": "1.0.13",
      "version": "1.0.18",
      "dependencies": {
        "@faceless-ui/slider": "^1.1.14",
        "@faceless-ui/window-info": "^2.1.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-dropzone": "^12.0.5",
        "react-ga": "^3.3.1",
        "react-mailchimp-subscribe": "^2.1.3",
        "react-markdown": "^8.0.0",
        "react-router-dom": "^6.2.1",
      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
    },
    "node_modules/react-ga": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-3.3.1.tgz",
      "integrity": "sha512-4Vc0W5EvXAXUN/wWyxvsAKDLLgtJ3oLmhYYssx+YzphJpejtOst6cbIHCIyF50Fdxuf5DDKqRYny24yJ2y7GFQ==",
      "peerDependencies": {
        "prop-types": "^15.6.0",
        "react": "^15.6.2 || ^16.0 || ^17 || ^18"
      }
    },
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
    },
    "react-ga": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-3.3.1.tgz",
      "integrity": "sha512-4Vc0W5EvXAXUN/wWyxvsAKDLLgtJ3oLmhYYssx+YzphJpejtOst6cbIHCIyF50Fdxuf5DDKqRYny24yJ2y7GFQ==",
      "requires": {}
    },
    "react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
 {
  "name": "frontend",
  "version": "1.0.17",
  "version": "1.0.18",
  "private": true,
  "dependencies": {
    "@faceless-ui/slider": "^1.1.14",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-dropzone": "^12.0.5",
    "react-ga": "^3.3.1",
    "react-mailchimp-subscribe": "^2.1.3",
    "react-markdown": "^8.0.0",
    "react-router-dom": "^6.2.1",
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Diligent Software</title>
    <!-- Google tag (gtag.js) -->
    <script async src='https://www.googletagmanager.com/gtag/js?id=G-PTZC3WLTZ1'></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() { dataLayer.push(arguments); }
      gtag('js', new Date());
      gtag('config', 'G-PTZC3WLTZ1');
    </script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
 import React, { useEffect, lazy, Suspense,  useRef, useState } from 'react';
 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 Loader from './components/shared/Loader';
 import ScrollToTop from './components/root/ScrollToTop';
 import ReactGA from 'react-ga';
 //import usePageTracking from './hooks/usePageTracking';
 import routes from './routes';
 const Home = lazy(() => import('./pages/Home'));
 const Portfolio = lazy(() => import('./pages/Portfolio'));
 const WorkWithUs = lazy(() => import('./pages/WorkWithUs'));
 // Navigation Links
 const links = [
  {
    name: 'Work with Us',
    description: '',
    href: '/workwithus',
    icon: '',
  },
  {
    name: 'Case Studies',
    description: '',
    href: '/portfolio',
    icon: '',
  },
  {
    name: 'Process',
    description: '',
    href: '/process',
    icon: '',
  },
  {
    name: 'Careers',
    description: '',
    href: '/careers',
    icon: '',
  },
  {
    name: 'About us',
    description: '',
    href: '/about',
    icon: '',
  },
 ];
 const links = routes.filter(item => item.nav === true);
 //analytics
 ReactGA.initialize(process.env.GOOGLE_TRACKING_ID);
 function App() {
  //tabs for contact form
    }
  }
  return (
    <div>
      <ScrollToTop />
      ></Navigation>
      <Suspense fallback={<Loader />}>
        <Routes>
          <Route
          {routes.map((route, index) => (
            <Route
              key={index}
              path={route.path}
              title={route.title}
              element={route.component}
              exact={route.exact}
            />
          ))}
          {/* <Route
            exact
            path="/"
            element={
          <Route exact path="/process" element={<ProcessPage />} />
          <Route exact path="/contact" element={<ContactPage />} />
          <Route exact path="/privacypolicy" element={<PrivacyPolicy />} />
          <Route exact path="/workwithus" element={<WorkWithUs />} />
          <Route exact path="/workwithus" element={<WorkWithUs />} /> */}
        </Routes>
      </Suspense>
--- a/frontend/src/components/shared/Footer.jsx
+++ b/frontend/src/components/shared/Footer.jsx
 import bg_socials from '../../assets/logos/socials_bg.png';
 import SocialMediaLinks from './SocialMediaLinks';
 import { Popover } from '@headlessui/react';
 import { NavLink, useNavigate } from 'react-router-dom';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
 const footerText =
  'Custom software solutions for variety of industries with the emphasis on reliability, innovation and top quality.';
 export default function Footer({ links, scrollToView, activeLinks }) {
  const home = useNavigate();
  const location = useLocation();
  function handleLogo() {
    home('/');
          {footerText}
        </p>
        <Popover.Group as="nav" className="hidden md:flex space-x-10 z-10">
          {links.map(item => (
          {links.map((item,index) => (
            <NavLink
              key={item.name}
              to={item.href}
              key={index}
              to={item.path}
              className={({ isActive }) => {
                return `text-base font-medium hover:text-dg-primary-900 focus:text-dg-primary-900 active:text-dg-primary-900 capitalize ${activeLinks(
                  isActive,
                )}`;
              }}
            >
              {item.name}
              {item.title}
            </NavLink>
          ))}
          {/* React Router Link does not support Anchor tags */}
--- a/frontend/src/components/shared/Navigation.jsx
+++ b/frontend/src/components/shared/Navigation.jsx
 import '../../App.css';
 import Wrapper from '../../layout/Wrapper';
 import menuIcon from './../../assets/icons/menu.svg';
 import useAnalyticsEventTracker from '../../hooks/useAnalyticsEventTracker';
 export default function Navigation({ links, scrollToView, activeLinks }) {
  const location = useLocation();
    home('/');
  }
  const gaEventTracker = useAnalyticsEventTracker('Contact Us')
  // Check if you are on HomePage to scroll to Contact us, or open a sepperate Contact us Page
            as="nav"
            className="hidden md:flex space-x-8 lg:space-x-10 items-center"
          >
            {links.map(item => (
            {links.map((item,index) => (
              <NavLink
                key={item.name}
                to={item.href}
                key={index}
                to={item.path}
                className={({ isActive }) => {
                  return `text-p font-medium dark:text-white hover:text-dg-primary-900 focus:text-dg-primary-900 active:text-dg-primary-900 capitalize ${activeLinks(
                    isActive,
                  )}`;
                }}
              >
                {item.name}
                {item.title}
              </NavLink>
            ))}
            {/* React Router Link does not support Anchor tags */}
            <div
              // onClick={event => scrollToView(event)}
              onClick={event => {gaEventTracker('contact');checkUrl(event)}}
              onClick={event => checkUrl(event)}
              href="#contact"
              className="contact-us-link text-p"
            >
                </div>
                <div className="mt-6">
                  <nav className="grid gap-y-8">
                    {links.map(item => (
                    {links.map((item,index) => (
                      <NavLink
                        onClick={() => close()}
                        key={item.name}
                        to={item.href}
                        key={index}
                        to={item.path}
                        className="text-p p-3 flex justify-center items-center rounded-md transition-all hover:transition-all hover:bg-dg-primary-900 hover:text-white"
                      >
                        <div aria-hidden="true" />
                        <span className="ml-3 text-base font-medium text-inherit">
                          {item.name}
                          {item.title}
                        </span>
                      </NavLink>
                    ))}
                    <a
                      href="#contact"
                      onClick={event => {
                        gaEventTracker('contact');
                        close();
                        checkUrl(event);
                      }}
--- a/frontend/src/hooks/useAnalytics.js
+++ b/frontend/src/hooks/useAnalytics.js
 import React, { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 const useAnalytics = () => {
    const location = useLocation();
    useEffect(() => {
        window.gtag('event', 'page_view', {
            page_title: document.title,
            page_path: location.pathname + location.search,
            page_location: window.location.href
        })
    }, [location]);
 }
 export default useAnalytics;
--- a/frontend/src/hooks/useAnalyticsEventTracker.js
+++ b/frontend/src/hooks/useAnalyticsEventTracker.js
 import React from "react";
 import ReactGA from 'react-ga';
 const useAnalyticsEventTracker = (category="Contact category") => {
    const eventTracker = (action = "test action", label = "test label") => {
      ReactGA.event({category, action, label});
    }
    return eventTracker;
  }
  export default useAnalyticsEventTracker;
--- a/frontend/src/hooks/usePageTracking.js
+++ b/frontend/src/hooks/usePageTracking.js
 import { useEffect, useState } from 'react';
 import ReactGA from 'react-ga';
 import { useLocation } from 'react-router';
 const initialiseAnalytics = () => {
    const TRACKING_ID = process.env.GOOGLE_TRACKING_ID;
    ReactGA.initialize(TRACKING_ID);
  }
 export const usePageTracking = () => {
    const location = useLocation();
    const [initialized, setInitialized] = useState(false);
    useEffect(() => {
      initialiseAnalytics();
      setInitialized(true);
    }, []);
    useEffect(() => {
      if (initialized) {
        ReactGA.pageview(location.pathname + location.search);
      }
    }, [initialized, location]);
  }
  export default usePageTracking;
--- a/frontend/src/pages/About.jsx
+++ b/frontend/src/pages/About.jsx
 import TimelineCardsWrapper2 from '../components/TimelineWrapper2';
 import TimelineLogo from '../components/TimelineLogo';
 import PageLayout from '../layout/PageLayout';
 import useAnalytics from '../hooks/useAnalytics';
 const _data = {
  heading: {
    subheading: 'About Us',
 };
 export default function About() {
  useAnalytics();
  useEffect(() => {
    document.title = 'About Us';
  }, []);
--- a/frontend/src/pages/Careers.jsx
+++ b/frontend/src/pages/Careers.jsx
 import CardCareers2 from '../components/CardCareers2';
 import OrbitOnScroll from '../components/shared/graphics/OrbitOnScroll';
 import PageLayout from '../layout/PageLayout';
 import useAnalytics from '../hooks/useAnalytics';
 // eslint-disable-next-line no-underscore-dangle
 const _data = {
  const api_url = process.env.REACT_APP_API_URL;
  useAnalytics();
  useEffect(() => {
    document.title = 'Careers';
  }, []);
--- a/frontend/src/pages/CaseStudy.jsx
+++ b/frontend/src/pages/CaseStudy.jsx
 import ActionCard from '../components/shared/ActionCard';
 import useAnalytics from '../hooks/useAnalytics';
 import PageLayout from '../layout/PageLayout';
 const technologies = [
 ];
 export default function CaseStudy() {
  useAnalytics();
  return (
    <PageLayout>
    <div className="bg-baby-blue dark:bg-dg-primary-1700 w-full pt-20 md:pt-24">
--- a/frontend/src/pages/CaseStudyBI.jsx
+++ b/frontend/src/pages/CaseStudyBI.jsx
 import Wrapper from '../layout/Wrapper';
 import TechNuggets from '../components/shared/TechNuggets';
 import { motion } from 'framer-motion';
 import useAnalytics from '../hooks/useAnalytics';
 const numbers = [
  {
 };
 export default function CaseStudyBI() {
  useAnalytics();
  useEffect(() => {
    document.title = 'Case Study: BI Healthcare Solution';
  }, []);
--- a/frontend/src/pages/CaseStudyCentralized.jsx
+++ b/frontend/src/pages/CaseStudyCentralized.jsx
 import Wrapper from '../layout/Wrapper';
 import { motion } from 'framer-motion';
 import TechNuggets from '../components/shared/TechNuggets';
 import useAnalytics from '../hooks/useAnalytics';
 const numbers = [
  {
 };
 export default function CaseStudyCentralized() {
  useAnalytics();
  useEffect(() => {
    document.title = 'Case Study: Centralized Monitoring System';
  }, []);
--- a/frontend/src/pages/CaseStudyFinantial.jsx
+++ b/frontend/src/pages/CaseStudyFinantial.jsx
 import { motion } from 'framer-motion';
 import Wrapper from '../layout/Wrapper';
 import TechNuggets from '../components/shared/TechNuggets';
 import useAnalytics from '../hooks/useAnalytics';
 const numbers = [
  {
    value: 5,
 };
 export default function CaseStudyFinantial() {
  useAnalytics();
  useEffect(() => {
    document.title = 'Case Study: Financial Engine';
  }, []);
--- a/frontend/src/pages/CaseStudyResource.jsx
+++ b/frontend/src/pages/CaseStudyResource.jsx
 import { motion } from 'framer-motion';
 import Wrapper from '../layout/Wrapper';
 import TechNuggets from '../components/shared/TechNuggets';
 import useAnalytics from '../hooks/useAnalytics';
 const numbers = [
  {
 };
 export default function CaseStudyResource() {
 useAnalytics();
  useEffect(() => {
    document.title = 'Case Study: Resource Planning System';
  }, []);
--- a/frontend/src/pages/CaseStudyStrata.jsx
+++ b/frontend/src/pages/CaseStudyStrata.jsx
 import { motion } from 'framer-motion';
 import Wrapper from '../layout/Wrapper';
 import TechNuggets from '../components/shared/TechNuggets';
 import useAnalytics from '../hooks/useAnalytics';
 const numbers = [
  {
 };
 export default function CaseStudyStrata() {
  useAnalytics();
  useEffect(() => {
    document.title = 'Case Study: Healthcare Tracking Software';
  }, []);
--- a/frontend/src/pages/CaseStudyTicketing.jsx
+++ b/frontend/src/pages/CaseStudyTicketing.jsx
 import { useEffect } from 'react';
 import { motion } from 'framer-motion';
 import TechNuggets from '../components/shared/TechNuggets';
 import useAnalytics from '../hooks/useAnalytics';
 const numbers = [
  {
    value: 10,
 };
 export default function CaseStudyTicketing() {
  useAnalytics();
  useEffect(() => {
    document.title = 'Case Study: Ticketing System For Passengers';
  }, []);
--- a/frontend/src/pages/ContactPage.jsx
+++ b/frontend/src/pages/ContactPage.jsx
 import Layout from '../layout/PageLayout';
 import axios from 'axios';
 import useDataApi from '../hooks/useDataApi';
 import useAnalytics from '../hooks/useAnalytics';
 function ContactPage() {
  const [data, setData] = useState('');
  const [isLoaded, setIsLoaded] = useState('');
  //const hookdata = useDataApi(`${api_url}/api/job-submissions`);
  useAnalytics();
  useEffect(() => {
    document.title = 'Contact Us';
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
 import HiringWidget from '../components/HiringWidget';
 import Animation_Diligent from '../assets/animation_diligent.webm';
 import ReactGA from 'react-ga';
 import '../styles/buttons.css';
 import '../styles/cards.css';
 import PortfolioSection from '../components/PortfolioSection';
 import PageLayout from '../layout/PageLayout';
 import MapDilig from '../components/Map';
 import useAnalytics from '../hooks/useAnalytics';
 const api_url = process.env.REACT_APP_API_URL;
  const [contactRef, setRef] = useState(forwardedRef)
  const [contactElement, setContactElement] = useState(0);
  useAnalytics();
  // const UIContext = useContext(UIContext);
  // const initUIValues = UIContext ?? {
  //set Tab Title
  useEffect(() => {
    document.title = 'Diligent Software';
    ReactGA.pageview(window.location.pathname);
  },[]);
--- a/frontend/src/pages/Portfolio.jsx
+++ b/frontend/src/pages/Portfolio.jsx
 import PageLayout from '../layout/PageLayout';
 import StrataThumb from './../assets/images/CaseStudy/StrataThumb.jpg';
 import useAnalytics from '../hooks/useAnalytics';
 const _data = {
  heading: {
 };
 export default function Portfolio() {
  // const [cntPortfolio, setCntPortfolio] = useState('');
  // const [array,setArray] = useState([]);
  // const [smallArray, setSmallArray] = useState([]);
  // const [largeArray, setLargeArray] = useState([]);
  // const [current, setCurrent] = useState([]);
  // const [isLoaded, setIsLoaded] = useState('');
  // const api_url = process.env.REACT_APP_API_URL;
  // const handleArray = (array) => {
  //   if (array == undefined) return;
  //   if (array.length <= 0) return;
  //   let left = false;
  //   let largeIndex = 4;
  //   let largeArray = [];
  //   let smallArray=[];
  //   let current = [];
  //   //ako je desno onda je 5
  //   //ako je levo onda je 7
  //   array.map((item) => {
  //     if (item.attributes.IsLarge === true) {
  //       largeArray.push(item);
  //     } else {
  //       smallArray.push(item);
  //     }
  //   })
  //   const index = smallArray.length + largeArray.length;
  //   for (let i = 0; i < index; i++) {
  //       //console.log(index)
  //       if(largeIndex - i == 0) {
  //         current.push(largeArray.shift());
  //         left = !left;
  //         if(!left) {
  //           largeIndex = largeIndex + 6;
  //         } else {
  //           largeIndex = largeIndex + 4;
  //         }
  //       } else {
  //         current.push(smallArray.shift());
  //       }
  //   }
  //   setCurrent(current);
  // }
  // useEffect(async () => {
  //   var vid = document.getElementById('animation');
  //   vid.playbackRate = 2;
  //   var temp = [];
  //   axios
  //     .get(
  //       `${api_url}/api/portfoliopage?populate[0]=heading&&populate[1]=case_studies&&populate[2]=case_studies.img`,
  //     )
  //     .then(res => {
  //       //console.log(res.data.data.attributes);
  //       setCntPortfolio(res.data.data.attributes);
  //       setArray(res.data.data.attributes.case_studies.data)
  //       setIsLoaded(true);
  //     })
  //     .catch(err => {
  //       console.log(err);
  //       setIsLoaded(false);
  //     });
  // }, []);
  // useEffect(() => {
  //   console.log(array);
  //   handleArray(array);
  // },[array]);
  // if (!isLoaded) {
  //   return (
  //     <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 dark:text-white flex items-center justify-center text-3xl font-semibold">
  //       <video id="animation" width="540" height="540" autoPlay muted loop>
  //         <source src={Animation_Diligent} type="video/webm" />
  //         Loading...
  //       </video>
  //     </div>
  //   );
  // }
  useAnalytics();
  useEffect(() => {
    document.title = 'Case Studies';
--- a/frontend/src/pages/PrivacyPolicy.jsx
+++ b/frontend/src/pages/PrivacyPolicy.jsx
 import React, { useEffect } from 'react';
 import useAnalytics from '../hooks/useAnalytics';
 import Wrapper from '../layout/Wrapper';
 const PrivacyPolicy = () => {
  useAnalytics;
  useEffect(() => {
    document.title = 'Privacy Policy';
--- a/frontend/src/pages/ProcessPage.jsx
+++ b/frontend/src/pages/ProcessPage.jsx
 import ProcessFacelessSlider from '../components/shared/ProcessFacelessSlider';
 import useWindowSize from '../hooks/useWindowSize';
 import ProcessSlider from '../components/ProcessSlider';
 import useAnalytics from '../hooks/useAnalytics';
 const _data = {
  heading: {
 };
 const ProcessPage = () => {
  //const api_url = process.env.REACT_APP_API_URL;
  // const [cntProcess, setCntProcess] = useState('');
  // const [isLoaded, setIsLoaded] = useState('');
  // useEffect(() => {
  //   var vid = document.getElementById('animation');
  //   vid.playbackRate = 2;
  //   async function fetch() {
  //     axios
  //       .get(
  //         `${api_url}/api/process-page`,
  //       )
  //       .then(res => {
  //         setCntProcess(res.data.data.attributes);
  //         //console.log(res.data.data.attributes);
  //         setIsLoaded(true);
  //       })
  //       .catch(err => {
  //         console.log(err);
  //         setIsLoaded(false);
  //       });
  //   }
  //   fetch();
  // }, []);
  // if (!isLoaded) {
  //   return (
  //     <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 dark:text-white flex items-center justify-center text-3xl font-semibold">
  //       <video id="animation" width="540" height="540" autoPlay muted loop>
  //         <source src={Animation_Diligent} type="video/webm" />
  //         Loading...
  //       </video>
  //     </div>
  //   );
  // }
  const [isMobile, setIsMobile] = useState(false);
  const windowInfo = useWindowSize();
  useAnalytics
  useEffect(() => {
    document.title = 'Process';
  }, []);
--- a/frontend/src/pages/WorkWithUs.jsx
+++ b/frontend/src/pages/WorkWithUs.jsx
 import PageHeading from '../components/shared/PageHeading'
 import PageTitle from '../components/shared/PageTitle'
 import Testimonials from '../components/Testimonials'
 import useAnalytics from '../hooks/useAnalytics'
 import Wrapper from '../layout/Wrapper'
 import {ReactComponent as DownalodIcon } from './../assets/download-icon.svg'
 import {ReactComponent as BusIcon } from './../assets/icons/workwithus/bus.svg'
    </div>
  )
 }
 const HelpParagraph = ({title, paragraph, key}) => {
 const HelpParagraph = ({title, paragraph}) => {
  return (
    <div className='' key={key}>
    <div className=''>
      <h4 className='font-semibold text-title'>{title}</h4>
      <p>{paragraph}</p>
    </div>
 }
 const WorkWithUs = () => {
  useAnalytics();
  useEffect(() => {
    document.title = 'Work With Us';
                      <li className='my-32p list-disc'>Deliverables are <b className='text-[#9B32CE]'>on time and within budget</b></li>
                      <li className='my-32p list-disc'>Deliverables are <b className='text-[#9B32CE]'>what the client needs</b>. We produce meaningful and positive contributions, we do not want to tick the checkboxes just so that we can call it done.</li> 
                      <li className='my-32p list-disc'>Our resources involved with the client <b className='text-[#9B32CE]'>have gained knowledge in the process</b>, they understand the client’s business, what they’ve created and most importantly - why it was created</li>
                      <li className='my-32p list-disc'>Our clients can <b className='text-[#9B32CE]'>demonstratively measure the improvements</b> in stability, volume, earnings, their client/user satisfaction…as a result of our contributions. </li>              
                      <li className='my-32p list-disc'>Our clients can <b className='text-[#9B32CE]'>demonstratively measure the improvements</b> in stability, volume, earnings, their client/user satisfaction…as a result of our contribimport useAnalytics from './../hooks/useAnalytics';
 utions. </li>              
                    </ul>
        </Wrapper>
--- a/frontend/src/routes.js
+++ b/frontend/src/routes.js
 import CaseStudy from "./components/CaseStudy";
 import About from "./pages/About";
 import Careers from "./pages/Careers";
 import CaseStudyBI from "./pages/CaseStudyBI";
 import CaseStudyCentralized from "./pages/CaseStudyCentralized";
 import CaseStudyFinantial from "./pages/CaseStudyFinantial";
 import CaseStudyResource from "./pages/CaseStudyResource";
 import CaseStudyStrata from "./pages/CaseStudyStrata";
 import CaseStudyTicketing from "./pages/CaseStudyTicketing";
 import ContactPage from "./pages/ContactPage";
 import Home from "./pages/Home";
 import Portfolio from "./pages/Portfolio";
 import PrivacyPolicy from "./pages/PrivacyPolicy";
 import WorkWithUs from "./pages/WorkWithUs";
 const routes = [
    {
      path: '/',
      component: <Home/>,
      title: 'Diligent Software',
      exact: true,
    },
    {
      path: '/workwithus',
      component: <WorkWithUs/>,
      title: 'Work with Us',
      exact: true,
      nav:true
    },
    {
      path: '/portfolio',
      component: <Portfolio/>,
      title: 'Case Studies',
      exact: true,
      nav:true
    },
    {
      path: '/casestudybi',
      component: <CaseStudyBI/>,
      title: 'BI Healthcare System',
      exact: true
    },
    {
        path: '/casestudystrata',
        component: <CaseStudyStrata/>,
        title: 'Health Tracking Software',
        exact: true
      },
      {
        path: '/casestudyfinancial',
        component: <CaseStudyFinantial/>,
        title: 'Financial Engine',
        exact: true
      },
      {
        path: '/casestudyticketing',
        component: <CaseStudyTicketing/>,
        title: 'Ticketing System for Passengers',
        exact: true
      },
      {
        path: '/casestudycentralized',
        component: <CaseStudyCentralized/>,
        title: 'Centralized Monitoring System',
        exact: true
      },
      {
        path: '/casestudyresource',
        component: <CaseStudyResource/>,
        title: 'Resource Planning System',
        exact: true
      },
      {
        path: '/careers',
        component: <Careers/>,
        title: 'Careers',
        exact: true,
        nav:true,
      },
      {
        path: '/about',
        component: <About/>,
        title: 'About Us',
        exact: true,
        nav:true,
      },
      {
        path: '/contact',
        component: <ContactPage/>,
        title: 'Contact Us',
        exact: true,
      },
      {
        path: '/privacypolicy',
        component: <PrivacyPolicy/>,
        title: 'Privacy Policy',
        exact: true
      },
  ];
  export default routes;
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
    "kleur" "^3.0.3"
    "sisteransi" "^1.0.5"
 "prop-types@^15.0.0", "prop-types@^15.5.10", "prop-types@^15.6.0", "prop-types@^15.7.2", "prop-types@^15.8.1":
 "prop-types@^15.0.0", "prop-types@^15.5.10", "prop-types@^15.7.2", "prop-types@^15.8.1":
  "integrity" "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="
  "resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
  "version" "15.8.1"
  "resolved" "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz"
  "version" "2.0.4"
 "react-ga@^3.3.1":
  "integrity" "sha512-4Vc0W5EvXAXUN/wWyxvsAKDLLgtJ3oLmhYYssx+YzphJpejtOst6cbIHCIyF50Fdxuf5DDKqRYny24yJ2y7GFQ=="
  "resolved" "https://registry.npmjs.org/react-ga/-/react-ga-3.3.1.tgz"
  "version" "3.3.1"
 "react-is@^16.13.1", "react-is@^16.7.0", "react-is@>= 16.8.0":
  "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
  "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
  optionalDependencies:
    "fsevents" "^2.3.2"
 "react@*", "react@^15.6.2 || ^16.0 || ^17 || ^18", "react@^16 || ^17 || ^18", "react@^16.8 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2", "react@>= 16", "react@>= 16.8", "react@>= 16.8.0", "react@>=15", "react@>=16", "react@>=16.8", "react@>=16.8 || ^17.0.0 || ^18.0.0", "react@>=16.8.0", "react@17.0.2":
 "react@*", "react@^16 || ^17 || ^18", "react@^16.8 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2", "react@>= 16", "react@>= 16.8", "react@>= 16.8.0", "react@>=15", "react@>=16", "react@>=16.8", "react@>=16.8 || ^17.0.0 || ^18.0.0", "react@>=16.8.0", "react@17.0.2":
  "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
  "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
  "version" "17.0.2"