Google Analytics

frontend/.env

@@ -9,3 +9,4 @@ REACT_APP_API_URL = "https://websitediligentapi.azurewebsites.net"
 //http://localhost:1337
 MAILCHIMP_FORM_URL = http://eepurl.com/iaRrv1
 GOOGLE_TRACKING_ID = "G-PTZC3WLTZ1"
+TRACKING_ID = "UA-249402473-1"

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "frontend",
-  "version": "1.0.20",
+  "version": "1.1.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "frontend",
-      "version": "1.0.20",
+      "version": "1.1.3",
       "dependencies": {
         "@faceless-ui/slider": "^1.1.14",
         "@faceless-ui/window-info": "^2.1.1",
@@ -27,6 +27,7 @@
         "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",
@@ -14541,6 +14542,15 @@
       "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",
@@ -28210,6 +28220,12 @@
       "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",

frontend/package.json

@@ -22,6 +22,7 @@
     "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",

frontend/src/App.js

@@ -5,10 +5,9 @@ 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 ReactGA from 'react-ga';
 import routes from './routes';
 
-
 const Home = lazy(() => import('./pages/Home'));
 const Portfolio = lazy(() => import('./pages/Portfolio'));
 const Services = lazy(() => import('./pages/Services'));
@@ -29,7 +28,7 @@ const WorkWithUs = lazy(() => import('./pages/WorkWithUs'));
 // Navigation Links
 const links = routes.filter(item => item.nav === true);
 
-
+ReactGA.initialize(process.env.TRACKING_ID);
 
 function App() {
   //tabs for contact form
@@ -46,7 +45,7 @@ function App() {
     event.preventDefault();
     if (forwardedRef) {
       //console.log(forwardedRef.current.offsetTop);
-      window.scrollTo({ behavior: 'smooth', top: forwardedRef.current.offsetTop })
+      window.scrollTo({ behavior: 'smooth', top: forwardedRef.current.offsetTop });
     } else {
       link('/contact');
     }
@@ -73,20 +72,20 @@ function App() {
       ></Navigation>
       <Suspense fallback={<Loader />}>
         <Routes>
-          <Route exact path="/" element={<Home forwardedRef={forwardedRef} />}/>
-          <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 />}/>
+          <Route exact path="/" element={<Home forwardedRef={forwardedRef} />} />
+          <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>
 

frontend/src/components/shared/ClientForm.jsx

@@ -6,6 +6,7 @@ import { ClientFormContext } from '../../context';
 import { useContext, useState } from 'react';
 import * as emailjs from 'emailjs-com';
 import { motion } from 'framer-motion';
+import ReactGA from 'react-ga';
 
 export default function ClientForm() {
   //search context for prevous entry TODO
@@ -79,6 +80,10 @@ export default function ClientForm() {
                     console.log(error.text);
                   },
                 );
+              ReactGA.event({
+                category: 'Contact',
+                action: 'Business Inquiry',
+              });
             }}
           >
             {props => (

frontend/src/components/shared/JobForm.jsx

@@ -7,7 +7,7 @@ import { JobFormContext } from '../../context';
 import { useContext, useState, useRef, useEffect } from 'react';
 import * as emailjs from 'emailjs-com';
 import { motion } from 'framer-motion';
-
+import ReactGA from 'react-ga';
 import MyDropzone from './MyDropzone';
 import HashPositions from './HashPositions';
 
@@ -144,6 +144,10 @@ export default function JobForm(props) {
                     );
                 });
               }
+              ReactGA.event({
+                category: 'Contact',
+                action: 'Job application',
+              });
             }}
           >
             {props => (

frontend/src/hooks/useAnalytics.js

@@ -1,16 +1,14 @@
-import React, { useEffect } from "react";
-import { useLocation } from "react-router-dom";
+import React, { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import ReactGA from 'react-ga';
 
-const useAnalytics = () => {
-    const location = useLocation();
+const useAnalytics = pageTitle => {
+  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]);
-}
+  useEffect(() => {
+    ReactGA.pageview(location.pathname, null, pageTitle);
+    console.log(`Google Analytics running for ${pageTitle}`);
+  }, []);
+};
 
 export default useAnalytics;

frontend/src/pages/About.jsx

@@ -23,7 +23,8 @@ import Wrapper from '../layout/Wrapper';
 import TimelineCardsWrapper2 from '../components/TimelineWrapper2';
 import TimelineLogo from '../components/TimelineLogo';
 import PageLayout from '../layout/PageLayout';
-//import useAnalytics from '../hooks/useAnalytics';
+import useAnalytics from '../hooks/useAnalytics';
+
 const _data = {
   heading: {
     subheading: 'About Us',
@@ -186,12 +187,11 @@ const _data = {
 };
 
 export default function About() {
-
   useEffect(() => {
     document.title = 'About Us';
   }, []);
 
-  //useAnalytics();
+  useAnalytics('About Us');
 
   return (
     <PageLayout>

frontend/src/pages/Careers.jsx

@@ -12,7 +12,7 @@ import AboutUsSlider from '../components/shared/AboutUsSlider';
 import CardCareers2 from '../components/CareerCardsTemplates/CardCareers2';
 import OrbitOnScroll from '../components/shared/graphics/OrbitOnScroll';
 import PageLayout from '../layout/PageLayout';
-//import useAnalytics from '../hooks/useAnalytics';
+import useAnalytics from '../hooks/useAnalytics';
 
 // eslint-disable-next-line no-underscore-dangle
 const _data = {
@@ -21,81 +21,83 @@ const _data = {
     subheading: 'Careers',
   },
   job: {
-      NetDev: {
-        id:1,
-        templateFlag:1,
-        role: '.Net Developer',
-        nugget: '.Net',
-        shortDetails:'An idea solves a problem. We help you to create that idea, build a product and scale it to be successful in your business.',
-        extended: {
-          paragraph: 'Team Diligent is constantly growing! We are looking for a team player that will work with experienced engineers. If technology is your passion and you are ready to move the boundaries of your knowledge every day, then, Diligent is the right place for you. If you are not from Niš, we are offering a full remote position.',
-          requirements: [
-            'Good software development fundamentals and knowledge of .NET architecture concepts & patterns',
-            'Good knowledge of software design patterns',
-            'Good knowledge of databases and database design',
-            'Experience in working with microservices is a big plus',
-            'The ability to work in a big team but also to work independently',
-            'Excellent communication skills'
-          ],
-          key: [
-            'Working as a full-stack developer on various project and products',
-            'Working with 3rd-party APIs',
-            'Working on different integration scenarios',
-            'Setting up project structure and architecture',
-            'Being involved in full project development, from writing a specification to deploying a finished product'
-          ],
-          offer: [
-            'Full Remote position',
-            'A fast-growth company with stable projects and strong international clients',
-            'Opportunity to work in teams with experienced engineers',
-            'Competitive employment conditions',
-            'An environment that will make you feel good about your job',
-            'Challenging and diverse projects',
-            'Support in your personal and professional growth',
-            'Flexible working hours',
-            'Private health insurance',
-          ],
-        },
-       
+    NetDev: {
+      id: 1,
+      templateFlag: 1,
+      role: '.Net Developer',
+      nugget: '.Net',
+      shortDetails:
+        'An idea solves a problem. We help you to create that idea, build a product and scale it to be successful in your business.',
+      extended: {
+        paragraph:
+          'Team Diligent is constantly growing! We are looking for a team player that will work with experienced engineers. If technology is your passion and you are ready to move the boundaries of your knowledge every day, then, Diligent is the right place for you. If you are not from Niš, we are offering a full remote position.',
+        requirements: [
+          'Good software development fundamentals and knowledge of .NET architecture concepts & patterns',
+          'Good knowledge of software design patterns',
+          'Good knowledge of databases and database design',
+          'Experience in working with microservices is a big plus',
+          'The ability to work in a big team but also to work independently',
+          'Excellent communication skills',
+        ],
+        key: [
+          'Working as a full-stack developer on various project and products',
+          'Working with 3rd-party APIs',
+          'Working on different integration scenarios',
+          'Setting up project structure and architecture',
+          'Being involved in full project development, from writing a specification to deploying a finished product',
+        ],
+        offer: [
+          'Full Remote position',
+          'A fast-growth company with stable projects and strong international clients',
+          'Opportunity to work in teams with experienced engineers',
+          'Competitive employment conditions',
+          'An environment that will make you feel good about your job',
+          'Challenging and diverse projects',
+          'Support in your personal and professional growth',
+          'Flexible working hours',
+          'Private health insurance',
+        ],
+      },
+    },
+    NetDevIntern: {
+      id: 2,
+      templateFlag: 2,
+      role: '.Net Developer Internship',
+      nugget: '.NetInernship',
+      shortDetails:
+        'An idea solves a problem. We help you to create that idea, build a product and scale it to be successful in your business.',
+      extended: {
+        paragraph:
+          'Team Diligent is constantly growing! We are looking for a team player that will work with experienced engineers. If technology is your passion and you are ready to move the boundaries of your knowledge every day, then, Diligent is the right place for you. If you are not from Niš, we are offering a full remote position.',
+        offer: [
+          'Paid internship',
+          'Full Remote position',
+          'A fast-growth company with stable projects and strong international clients',
+          'Experience of working in a team',
+          'Work on real project with real clients',
+          'Mentorship from industry leaders',
+          'Support in your personal and professional growth',
+          'Lots of team activities and perks',
+          'Modern working place with a positive and fun atmosphere',
+        ],
+        requirements: [
+          'Fundamentals of data structures ',
+          'Fundamentals and knowledge of .NET architecture concepts & patterns',
+          'Fundamentals of databases and database design',
+          'Team player and fast learner',
+          'Analytical and problem-solving skills',
+        ],
+        selectionProcess: [
+          'Application',
+          'CV Screening',
+          'HR Interview',
+          'Technical Interview',
+          'Internship - offer & contract',
+        ],
+        conslusionParagraph:
+          'At the end of the selection process, we will select interns able to join our team for a 3 months internship and arrange the beginning of the practice personally with you.',
       },
-      NetDevIntern: {
-        id:2,
-        templateFlag:2,
-        role: '.Net Developer Internship',
-        nugget: '.NetInernship',
-        shortDetails:'An idea solves a problem. We help you to create that idea, build a product and scale it to be successful in your business.',
-        extended: {
-          paragraph: 'Team Diligent is constantly growing! We are looking for a team player that will work with experienced engineers. If technology is your passion and you are ready to move the boundaries of your knowledge every day, then, Diligent is the right place for you. If you are not from Niš, we are offering a full remote position.',
-          offer: [
-            'Paid internship',
-            'Full Remote position',
-            'A fast-growth company with stable projects and strong international clients',
-            'Experience of working in a team',
-            'Work on real project with real clients',
-            'Mentorship from industry leaders',
-            'Support in your personal and professional growth',
-            'Lots of team activities and perks',
-            'Modern working place with a positive and fun atmosphere',
-          ],
-          requirements: [
-            'Fundamentals of data structures ',
-            'Fundamentals and knowledge of .NET architecture concepts & patterns',
-            'Fundamentals of databases and database design',
-            'Team player and fast learner',
-            'Analytical and problem-solving skills',
-          ],
-          selectionProcess: [
-            'Application',
-            'CV Screening',
-            'HR Interview',
-            'Technical Interview',
-            'Internship - offer & contract'
-          ],
-          conslusionParagraph: 'At the end of the selection process, we will select interns able to join our team for a 3 months internship and arrange the beginning of the practice personally with you.'
-        },
-       
-      }, 
-    
+    },
   },
   life: {
     heading: 'A Culture That’s Serious About Work and Fun',
@@ -157,13 +159,11 @@ export default function Careers({ forwardedRef }) {
 
   const api_url = process.env.REACT_APP_API_URL;
 
-  
-
   useEffect(() => {
     document.title = 'Careers';
   }, []);
 
-  //useAnalytics();
+  useAnalytics('Careers');
 
   useEffect(async () => {
     var vid = document.getElementById('animation');

frontend/src/pages/CaseStudy.jsx

@@ -1,5 +1,5 @@
 import ActionCard from '../components/shared/ActionCard';
-//import useAnalytics from '../hooks/useAnalytics';
+import useAnalytics from '../hooks/useAnalytics';
 import PageLayout from '../layout/PageLayout';
 import { useEffect } from 'react';
 
@@ -41,163 +41,164 @@ const technologies = [
 export default function CaseStudy() {
   useEffect(() => {
     document.title = 'Case Studies';
-  },[]);
+  }, []);
+
+  useAnalytics('Case Studies');
 
-  //useAnalytics();
-  
   return (
     <PageLayout>
-    <div className="bg-baby-blue dark:bg-dg-primary-1700 w-full pt-20 md:pt-24">
-      {/* Heading Section */}
-      <section
-        id="heading"
-        className="flex flex-col items-center justify-center m-auto py-16 md:py-32 bg-[url('https://images.unsplash.com/photo-1619252584172-a83a949b6efd')] bg-fixed bg-cover"
-      >
-        <div className="my-8 flex flex-col md:flex-row justify-start items-center w-full max-w-custom px-8 xl:px-0">
-          <div className="w-full">
-            <h6 className="subheading">Case Study</h6>
-            <h1 className="heading text-dg-secondary mt-2">BI Healthcare Solution </h1>
-            <p className="paragraph mt-4">
-              BI Solution that provides an uncommon level of insights into the healing
-              process.
-            </p>
+      <div className="bg-baby-blue dark:bg-dg-primary-1700 w-full pt-20 md:pt-24">
+        {/* Heading Section */}
+        <section
+          id="heading"
+          className="flex flex-col items-center justify-center m-auto py-16 md:py-32 bg-[url('https://images.unsplash.com/photo-1619252584172-a83a949b6efd')] bg-fixed bg-cover"
+        >
+          <div className="my-8 flex flex-col md:flex-row justify-start items-center w-full max-w-custom px-8 xl:px-0">
+            <div className="w-full">
+              <h6 className="subheading">Case Study</h6>
+              <h1 className="heading text-dg-secondary mt-2">BI Healthcare Solution </h1>
+              <p className="paragraph mt-4">
+                BI Solution that provides an uncommon level of insights into the healing
+                process.
+              </p>
+            </div>
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* About the Client Section */}
-      <section id="client" className="flex flex-col items-center justify-center mt-16">
-        <div className="my-8 flex flex-col md:flex-row justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0">
-          <div className="w-full md:w-1/2">
-            <h3 className="h3-heading text-teal-600">About the Client</h3>
-            <p className="paragraph mt-4">
-              Healthcare company has a centralized IT solution for tracking every aspect
-              of their own business, especially services provided to clients and working
-              times of their clinicians in all clinics they own all around the USA.
-            </p>
-          </div>
-          <div className="w-full md:w-1/2 grid grid-cols-2 md:grid-cols-3 gap-16 mt-8 md:mt-0">
-            <div className="hidden md:inline-block"></div>
-            <div className="float-left md:float-right text-left md:text-right">
-              <h5 className="text-teal-600 font-semibold">Country</h5>
-              <p className="mt-4">USA</p>
+        {/* About the Client Section */}
+        <section id="client" className="flex flex-col items-center justify-center mt-16">
+          <div className="my-8 flex flex-col md:flex-row justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0">
+            <div className="w-full md:w-1/2">
+              <h3 className="h3-heading text-teal-600">About the Client</h3>
+              <p className="paragraph mt-4">
+                Healthcare company has a centralized IT solution for tracking every aspect
+                of their own business, especially services provided to clients and working
+                times of their clinicians in all clinics they own all around the USA.
+              </p>
             </div>
-            <div className="float-left md:float-right text-left md:text-right">
-              <h5 className="text-teal-600 font-semibold">Industry</h5>
-              <p className="mt-4">Healthcare</p>
+            <div className="w-full md:w-1/2 grid grid-cols-2 md:grid-cols-3 gap-16 mt-8 md:mt-0">
+              <div className="hidden md:inline-block"></div>
+              <div className="float-left md:float-right text-left md:text-right">
+                <h5 className="text-teal-600 font-semibold">Country</h5>
+                <p className="mt-4">USA</p>
+              </div>
+              <div className="float-left md:float-right text-left md:text-right">
+                <h5 className="text-teal-600 font-semibold">Industry</h5>
+                <p className="mt-4">Healthcare</p>
+              </div>
             </div>
           </div>
-        </div>
-      </section>
-
-      {/* Domain Section */}
-      <section id="domain" className="flex flex-col items-center justify-center mt-16">
-        <div className="my-8 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
-          <div className="w-full">
-            <h3 className="h3-heading">Domain</h3>
-            <p className="paragraph mt-4">
-              BI Solution helps clinicians to improve their work and create a wider
-              picture of client progress during the healing process. The solution offers
-              our customers a high level of insight into their cash flows and workforce
-              organization. In one word, this is a fully customizable solution for a
-              comprehensive business process.
-            </p>
-          </div>
-        </div>
-      </section>
+        </section>
 
-      {/* Challanges, Solution Section */}
-      <section
-        id="challanges_solution"
-        className="flex flex-col items-center justify-center mt-16"
-      >
-        <div className="my-8 flex flex-col md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
-          <div className="w-full md:w-1/2 md:pr-16">
-            <div>
-              <h3 className="h3-heading">Challanges</h3>
-              <p className="text-sm text-dark-gray dark:text-white mt-4">
-                The main objective is to create a solution that meets the requirements of
-                stakeholders while integrating with existing IT systems to get data
-                without impacting the system. The solution should use only an MS stack of
-                technologies while taking care of sensitive data, and maintaining and
-                providing up-to-date data. The solution should also be a comfortable and
-                reliable, user-friendly solution for everyday work.
-              </p>
-            </div>
-            <div className="mt-8">
-              <h3 className="h3-heading">Solution</h3>
-              <p className="text-sm text-dark-gray dark:text-white mt-4">
-                The purpose of interactive data visualization is to allow users to explore
-                and understand data. We used the Power BI analytics service to accomplish
-                this. Azure has several features that automate data processing and ensure
-                the reliability and security of the data.
+        {/* Domain Section */}
+        <section id="domain" className="flex flex-col items-center justify-center mt-16">
+          <div className="my-8 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
+            <div className="w-full">
+              <h3 className="h3-heading">Domain</h3>
+              <p className="paragraph mt-4">
+                BI Solution helps clinicians to improve their work and create a wider
+                picture of client progress during the healing process. The solution offers
+                our customers a high level of insight into their cash flows and workforce
+                organization. In one word, this is a fully customizable solution for a
+                comprehensive business process.
               </p>
             </div>
           </div>
-          <img
-            src="https://drive.google.com/uc?export=view&id=1TDOQDUkH4dDnjx2x5DJkDpi5xEHrbCvS"
-            alt="Case Study main image"
-            className="text-center w-full md:w-1/2"
-          />
-        </div>
-      </section>
+        </section>
 
-      {/* Results Section */}
-      <section id="results" className="flex flex-col items-center justify-center mt-16">
-        <div className="my-8 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
-          <div className="w-full">
-            <h3 className="h3-heading text-dg-secondary">Results</h3>
-            <ul className="list-disc paragraph mt-2 pl-8">
-              <li>Visualize information to ensure better data understanding </li>
-              <li>
-                Deliver the product within an established amount of time and defined
-                budgets
-              </li>
-              <li> Be up to date with the latest stack of technologies</li>
-              <li>
-                Offer services from ETL with complex data processing to data visualization
-              </li>
-            </ul>
+        {/* Challanges, Solution Section */}
+        <section
+          id="challanges_solution"
+          className="flex flex-col items-center justify-center mt-16"
+        >
+          <div className="my-8 flex flex-col md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
+            <div className="w-full md:w-1/2 md:pr-16">
+              <div>
+                <h3 className="h3-heading">Challanges</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  The main objective is to create a solution that meets the requirements
+                  of stakeholders while integrating with existing IT systems to get data
+                  without impacting the system. The solution should use only an MS stack
+                  of technologies while taking care of sensitive data, and maintaining and
+                  providing up-to-date data. The solution should also be a comfortable and
+                  reliable, user-friendly solution for everyday work.
+                </p>
+              </div>
+              <div className="mt-8">
+                <h3 className="h3-heading">Solution</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  The purpose of interactive data visualization is to allow users to
+                  explore and understand data. We used the Power BI analytics service to
+                  accomplish this. Azure has several features that automate data
+                  processing and ensure the reliability and security of the data.
+                </p>
+              </div>
+            </div>
+            <img
+              src="https://drive.google.com/uc?export=view&id=1TDOQDUkH4dDnjx2x5DJkDpi5xEHrbCvS"
+              alt="Case Study main image"
+              className="text-center w-full md:w-1/2"
+            />
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* Technologies Section */}
-      <section
-        id="technologies"
-        className="flex flex-col items-center justify-center mt-16"
-      >
-        <div className="my-8 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
-          <div className="w-full">
-            <h3 className="h3-heading">Technologies</h3>
+        {/* Results Section */}
+        <section id="results" className="flex flex-col items-center justify-center mt-16">
+          <div className="my-8 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
+            <div className="w-full">
+              <h3 className="h3-heading text-dg-secondary">Results</h3>
+              <ul className="list-disc paragraph mt-2 pl-8">
+                <li>Visualize information to ensure better data understanding </li>
+                <li>
+                  Deliver the product within an established amount of time and defined
+                  budgets
+                </li>
+                <li> Be up to date with the latest stack of technologies</li>
+                <li>
+                  Offer services from ETL with complex data processing to data
+                  visualization
+                </li>
+              </ul>
+            </div>
           </div>
-          <div className="grid grid-cols-4 justify-center justify-items-center gap-8 xl:flex xl:flex-row items-center xl:justify-start xl:gap-16 w-full mt-8">
-            {technologies.map(technology => (
-              <img
-                key={technology.id}
-                src={technology.link}
-                alt="Technology's image"
-                className="w-12 md:w-16 lg:w-20"
-              />
-            ))}
+        </section>
+
+        {/* Technologies Section */}
+        <section
+          id="technologies"
+          className="flex flex-col items-center justify-center mt-16"
+        >
+          <div className="my-8 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
+            <div className="w-full">
+              <h3 className="h3-heading">Technologies</h3>
+            </div>
+            <div className="grid grid-cols-4 justify-center justify-items-center gap-8 xl:flex xl:flex-row items-center xl:justify-start xl:gap-16 w-full mt-8">
+              {technologies.map(technology => (
+                <img
+                  key={technology.id}
+                  src={technology.link}
+                  alt="Technology's image"
+                  className="w-12 md:w-16 lg:w-20"
+                />
+              ))}
+            </div>
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* CTA Section */}
-      <section id="cta" className="flex flex-col items-center justify-center mt-16">
-        <div className="px-8 mt-8 mb-32 w-full max-w-custom">
-          <ActionCard
-            title="Let's Work Together!"
-            text="Business Intelligence portal which enhouses series of web applications & reporting tools used for in-depth analysis on product pricing, money flow, resources, employees, etc. Applications provide administrative users overview, as well as detail look scaled down to individual product."
-            btn1="More Projects"
-            btn2="Contact Us"
-            link1={'/portfolio'}
-            link2={'/contact'}
-          />
-        </div>
-      </section>
-    </div>
+        {/* CTA Section */}
+        <section id="cta" className="flex flex-col items-center justify-center mt-16">
+          <div className="px-8 mt-8 mb-32 w-full max-w-custom">
+            <ActionCard
+              title="Let's Work Together!"
+              text="Business Intelligence portal which enhouses series of web applications & reporting tools used for in-depth analysis on product pricing, money flow, resources, employees, etc. Applications provide administrative users overview, as well as detail look scaled down to individual product."
+              btn1="More Projects"
+              btn2="Contact Us"
+              link1={'/portfolio'}
+              link2={'/contact'}
+            />
+          </div>
+        </section>
+      </div>
     </PageLayout>
   );
 }

frontend/src/pages/CaseStudyBI.jsx

@@ -10,7 +10,7 @@ import { useEffect } from 'react';
 import Wrapper from '../layout/Wrapper';
 import TechNuggets from '../components/shared/TechNuggets';
 import { motion } from 'framer-motion';
-//import useAnalytics from '../hooks/useAnalytics';
+import useAnalytics from '../hooks/useAnalytics';
 
 const numbers = [
   {
@@ -117,12 +117,11 @@ const _data = {
 };
 
 export default function CaseStudyBI() {
-  
   useEffect(() => {
     document.title = 'Case Study: BI Healthcare Solution';
   }, []);
 
-  //useAnalytics();
+  useAnalytics('Case Study: BI Healthcare Solution');
 
   return (
     <PageLayout>
@@ -245,7 +244,16 @@ export default function CaseStudyBI() {
               <h3 className="h3-heading">Technologies</h3>
             </div>
             <TechNuggets
-              tech={['Azure Data Factory','Azure SQL Server', 'Microsoft Power BI', '.Net Core', 'Azure App Services', 'Microsoft Power Automate','Azure Logic Apps','Azure Active Directory']}
+              tech={[
+                'Azure Data Factory',
+                'Azure SQL Server',
+                'Microsoft Power BI',
+                '.Net Core',
+                'Azure App Services',
+                'Microsoft Power Automate',
+                'Azure Logic Apps',
+                'Azure Active Directory',
+              ]}
             />
           </div>
         </section>

frontend/src/pages/CaseStudyCentralized.jsx

@@ -10,7 +10,7 @@ import { useEffect } from 'react';
 import Wrapper from '../layout/Wrapper';
 import { motion } from 'framer-motion';
 import TechNuggets from '../components/shared/TechNuggets';
-//import useAnalytics from '../hooks/useAnalytics';
+import useAnalytics from '../hooks/useAnalytics';
 
 const numbers = [
   {
@@ -120,12 +120,11 @@ const _data = {
 };
 
 export default function CaseStudyCentralized() {
-  
   useEffect(() => {
     document.title = 'Case Study: Centralized Monitoring System';
   }, []);
 
-  //useAnalytics();
+  useAnalytics('Case Study: Centralized Monitoring System');
 
   return (
     <PageLayout>
@@ -146,26 +145,25 @@ export default function CaseStudyCentralized() {
           </div>
         </section>
 
-        <Wrapper  padding={' py-90p'}>
-      <motion.section
-          id="status-numbers"
-          className="flex flex-col md:flex-row items-start justify-between w-full gap-90p px-90p"
-          initial={{ y: 60, opacity: 0 }}
-          whileInView={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.5, ease: 'easeOut' }}
-        >
-          {numbers.map((item, i) => (
-            <div key={i} className="flex flex-col">
-              <h2 className="display-number text-center">
-                {item.value}{item.static}
-              </h2>
-              <h3 className="number-title text-center">
-                {item.title}
-              </h3>
-            </div>
-          ))}
-        </motion.section>
-      </Wrapper>
+        <Wrapper padding={' py-90p'}>
+          <motion.section
+            id="status-numbers"
+            className="flex flex-col md:flex-row items-start justify-between w-full gap-90p px-90p"
+            initial={{ y: 60, opacity: 0 }}
+            whileInView={{ y: 0, opacity: 1 }}
+            transition={{ duration: 0.5, ease: 'easeOut' }}
+          >
+            {numbers.map((item, i) => (
+              <div key={i} className="flex flex-col">
+                <h2 className="display-number text-center">
+                  {item.value}
+                  {item.static}
+                </h2>
+                <h3 className="number-title text-center">{item.title}</h3>
+              </div>
+            ))}
+          </motion.section>
+        </Wrapper>
 
         {/* About the Client Section */}
         <section id="client" className="flex flex-col items-center justify-center mt-16">
@@ -250,7 +248,7 @@ export default function CaseStudyCentralized() {
             <div className="w-full">
               <h3 className="h3-heading">Technologies</h3>
             </div>
-            <TechNuggets tech={['.Net','MS SQL Server','JQuery','Power BI']} />
+            <TechNuggets tech={['.Net', 'MS SQL Server', 'JQuery', 'Power BI']} />
           </div>
         </section>
 

frontend/src/pages/CaseStudyFinantial.jsx

@@ -8,7 +8,7 @@ import { useEffect } from 'react';
 import { motion } from 'framer-motion';
 import Wrapper from '../layout/Wrapper';
 import TechNuggets from '../components/shared/TechNuggets';
-//import useAnalytics from '../hooks/useAnalytics';
+import useAnalytics from '../hooks/useAnalytics';
 const numbers = [
   {
     value: 5,
@@ -113,7 +113,7 @@ export default function CaseStudyFinantial() {
     document.title = 'Case Study: Financial Engine';
   }, []);
 
-  //useAnalytics();
+  useAnalytics('Case Study: Financial Engine');
 
   return (
     <PageLayout>
@@ -229,14 +229,20 @@ export default function CaseStudyFinantial() {
           </div>
         </section>
 
-       {/* Technologies Section */}
-       <section id="technologies" className="flex flex-col mt-16">
+        {/* Technologies Section */}
+        <section id="technologies" className="flex flex-col mt-16">
           <div className="my-8 flex flex-col w-full max-w-custom m-auto px-8 xl:px-0">
             <div className="w-full">
               <h3 className="h3-heading">Technologies</h3>
             </div>
             <TechNuggets
-              tech={['.Net','Service-Oriented Architecture (SOA)', 'MS SQL Server', 'MS MVC', 'Event-Driven Architecture (EDA)']}
+              tech={[
+                '.Net',
+                'Service-Oriented Architecture (SOA)',
+                'MS SQL Server',
+                'MS MVC',
+                'Event-Driven Architecture (EDA)',
+              ]}
             />
           </div>
         </section>

frontend/src/pages/CaseStudyResource.jsx

@@ -10,7 +10,7 @@ import { useEffect } from 'react';
 import { motion } from 'framer-motion';
 import Wrapper from '../layout/Wrapper';
 import TechNuggets from '../components/shared/TechNuggets';
-//import useAnalytics from '../hooks/useAnalytics';
+import useAnalytics from '../hooks/useAnalytics';
 
 const numbers = [
   {
@@ -115,13 +115,11 @@ const _data = {
 };
 
 export default function CaseStudyResource() {
-
-
   useEffect(() => {
     document.title = 'Case Study: Resource Planning System';
   }, []);
 
-  //useAnalytics();
+  useAnalytics('Case Study: Resource Planning System');
 
   return (
     <PageLayout>
@@ -243,9 +241,7 @@ export default function CaseStudyResource() {
             <div className="w-full">
               <h3 className="h3-heading">Technologies</h3>
             </div>
-            <TechNuggets
-              tech={['.Net', 'MS SQL Server', 'React Native', 'React.JS']}
-            />
+            <TechNuggets tech={['.Net', 'MS SQL Server', 'React Native', 'React.JS']} />
           </div>
         </section>
 

frontend/src/pages/CaseStudyStrata.jsx

@@ -11,7 +11,7 @@ import { useEffect } from 'react';
 import { motion } from 'framer-motion';
 import Wrapper from '../layout/Wrapper';
 import TechNuggets from '../components/shared/TechNuggets';
-//import useAnalytics from '../hooks/useAnalytics';
+import useAnalytics from '../hooks/useAnalytics';
 
 const numbers = [
   {
@@ -111,13 +111,12 @@ const _data = {
 };
 
 export default function CaseStudyStrata() {
-
   useEffect(() => {
     document.title = 'Case Study: Healthcare Tracking Software';
   }, []);
 
-  //useAnalytics();
-  
+  useAnalytics('Case Study: Healthcare Tracking Software');
+
   return (
     <PageLayout>
       <div className="bg-baby-blue dark:bg-dg-primary-1700 w-full pt-20 md:pt-24">
@@ -240,9 +239,7 @@ export default function CaseStudyStrata() {
             <div className="w-full">
               <h3 className="h3-heading">Technologies</h3>
             </div>
-            <TechNuggets
-              tech={['C#', 'MVC', 'SQL','Ajax','React Native']}
-            />
+            <TechNuggets tech={['C#', 'MVC', 'SQL', 'Ajax', 'React Native']} />
           </div>
         </section>
 

frontend/src/pages/CaseStudyTicketing.jsx

@@ -10,7 +10,7 @@ import ionic from './../assets/icons/caseStudy/ionic.svg';
 import { useEffect } from 'react';
 import { motion } from 'framer-motion';
 import TechNuggets from '../components/shared/TechNuggets';
-//import useAnalytics from '../hooks/useAnalytics';
+import useAnalytics from '../hooks/useAnalytics';
 const numbers = [
   {
     value: 10,
@@ -123,13 +123,11 @@ const _data = {
 };
 
 export default function CaseStudyTicketing() {
-
-  
   useEffect(() => {
     document.title = 'Case Study: Ticketing System For Passengers';
   }, []);
 
-  //useAnalytics();
+  useAnalytics('Case Study: Ticketing System For Passengers');
 
   return (
     <PageLayout>
@@ -246,10 +244,7 @@ export default function CaseStudyTicketing() {
         </section>
 
         {/* Technologies Section */}
-        <section
-          id="technologies"
-          className="flex flex-col mt-16"
-        >
+        <section id="technologies" className="flex flex-col mt-16">
           <div className="my-8 flex flex-col w-full max-w-custom m-auto px-8 xl:px-0">
             <div className="w-full">
               <h3 className="h3-heading">Technologies</h3>

frontend/src/pages/ContactPage.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import Contact from '../components/shared/Contact';
 import { UIContext } from '../context';
 import PageLayout from '../layout/PageLayout';
-//import useAnalytics from '../hooks/useAnalytics';
+import useAnalytics from '../hooks/useAnalytics';
 
 function ContactPage() {
   const [data, setData] = useState('');
@@ -12,7 +12,7 @@ function ContactPage() {
     document.title = 'Contact Us';
   }, []);
 
-  //useAnalytics();
+  useAnalytics('Contact Us');
 
   return (
     <PageLayout>

frontend/src/pages/Home.jsx

@@ -29,18 +29,17 @@ import TechStack from '../components/TechStack';
 import PortfolioSection from '../components/PortfolioSection';
 import PageLayout from '../layout/PageLayout';
 import MapDilig from '../components/Map';
-//import useAnalytics from '../hooks/useAnalytics';
-
+import useAnalytics from '../hooks/useAnalytics';
 const api_url = process.env.REACT_APP_API_URL;
 
-export default function Home({forwardedRef}) {
+export default function Home({ forwardedRef }) {
   const [cnt, setCnt] = useState('');
   const [isLoaded, setIsLoaded] = useState('');
 
-  const [contactRef, setRef] = useState(forwardedRef)
+  const [contactRef, setRef] = useState(forwardedRef);
   const [contactElement, setContactElement] = useState(0);
 
-  
+  useAnalytics('Home page');
 
   // const UIContext = useContext(UIContext);
 
@@ -52,10 +51,9 @@ export default function Home({forwardedRef}) {
   //set Tab Title
   useEffect(() => {
     document.title = 'Diligent Software';
-  },[]);
-
- // useAnalytics();
+  }, []);
 
+  // useAnalytics();
 
   useEffect(() => {
     var vid = document.getElementById('animation');
@@ -88,10 +86,10 @@ export default function Home({forwardedRef}) {
   } else {
     return (
       <PageLayout>
-      <div className="bg-white dark:bg-dg-primary-1700 w-full pt-32 overflow-hidden">
-        {/* <FormSwitch /> */}
+        <div className="bg-white dark:bg-dg-primary-1700 w-full pt-32 overflow-hidden">
+          {/* <FormSwitch /> */}
 
-        {/* <Tab.Group>
+          {/* <Tab.Group>
       <Tab.List>
         <Tab>Tab 1</Tab>
         <Tab>Tab 2</Tab>
@@ -102,44 +100,41 @@ export default function Home({forwardedRef}) {
       </Tab.Panels>
     </Tab.Group> */}
 
-        {/* Landing Section */}
-       <Landing data={cnt.landing.heading} />
+          {/* Landing Section */}
+          <Landing data={cnt.landing.heading} />
 
-        {/* Why Us Section */}
-        <WhySection data={cnt.why} />
+          {/* Why Us Section */}
+          <WhySection data={cnt.why} />
 
-        {/* Our Services Section */}
-        {/* <ServicesHome /> */}
+          {/* Our Services Section */}
+          {/* <ServicesHome /> */}
 
-        {/* Our Process Section */}
-        <ProcessSection />
+          {/* Our Process Section */}
+          <ProcessSection />
 
-        {/* Our Process Section */}
-        <TechStack />
+          {/* Our Process Section */}
+          <TechStack />
 
-        {/* Testimonials Section*/}
-        <Testimonials
-        />
+          {/* Testimonials Section*/}
+          <Testimonials />
 
-        {/* Social Networks Section */}
-        {/* <section
+          {/* Social Networks Section */}
+          {/* <section
           id="socials"
           className="h-fit bg-white dark:bg-dg-primary-1700 flex flex-col items-center px-4"
         >
           <SocialNetworks />
         </section> */}
 
-        <PortfolioSection />
+          <PortfolioSection />
 
-        {/* Contact Section */}
-        <section id="contact" className="" ref={forwardedRef}>
-          <Contact defaultIndex={0} />
-        </section>
+          {/* Contact Section */}
+          <section id="contact" className="" ref={forwardedRef}>
+            <Contact defaultIndex={0} />
+          </section>
 
-
-        <MapDilig />
-       
-      </div>
+          <MapDilig />
+        </div>
       </PageLayout>
     );
   }

frontend/src/pages/Portfolio.jsx

@@ -13,7 +13,7 @@ import CardsGrid from '../components/CardsGrid';
 import PageLayout from '../layout/PageLayout';
 
 import StrataThumb from './../assets/images/CaseStudy/StrataThumb.jpg';
-//import useAnalytics from '../hooks/useAnalytics';
+import useAnalytics from '../hooks/useAnalytics';
 
 const _data = {
   heading: {
@@ -74,12 +74,11 @@ const _data = {
 };
 
 export default function Portfolio() {
-
   useEffect(() => {
     document.title = 'Case Studies';
   }, []);
 
-  //useAnalytics();
+  useAnalytics('Case Studies');
 
   return (
     <PageLayout>

frontend/src/pages/ProcessPage.jsx

@@ -16,7 +16,7 @@ import PageLayout from '../layout/PageLayout';
 import ProcessFacelessSlider from '../components/shared/ProcessFacelessSlider';
 import useWindowSize from '../hooks/useWindowSize';
 import ProcessSlider from '../components/ProcessSlider';
-//import useAnalytics from '../hooks/useAnalytics';
+import useAnalytics from '../hooks/useAnalytics';
 
 const _data = {
   heading: {
@@ -122,7 +122,6 @@ const _data = {
 };
 
 const ProcessPage = () => {
-
   const [isMobile, setIsMobile] = useState(false);
 
   const windowInfo = useWindowSize();
@@ -131,14 +130,12 @@ const ProcessPage = () => {
     document.title = 'Process';
   }, []);
 
-  //useAnalytics();
+  useAnalytics('Process');
 
   useEffect(() => {
-    if (windowInfo.width < 1000) 
-    setIsMobile(true);
-    else
-    setIsMobile(false);
-  },[windowInfo]);
+    if (windowInfo.width < 1000) setIsMobile(true);
+    else setIsMobile(false);
+  }, [windowInfo]);
 
   return (
     <PageLayout>

frontend/src/pages/WorkWithUs.jsx

@@ -1,201 +1,244 @@
-import React, { Children, useEffect } from 'react'
-import { Link } from 'react-router-dom'
-import CustomLink from '../components/root/CustomLink'
-import TertiaryButton from '../components/root/TertiaryButton'
-import ActionCard from '../components/shared/ActionCard'
-import CardLife from '../components/shared/CardLife'
-import PageHeading from '../components/shared/PageHeading'
-import PageTitle from '../components/shared/PageTitle'
-import Testimonials from '../components/Testimonials'
+import React, { Children, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import CustomLink from '../components/root/CustomLink';
+import TertiaryButton from '../components/root/TertiaryButton';
+import ActionCard from '../components/shared/ActionCard';
+import CardLife from '../components/shared/CardLife';
+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'
-import {ReactComponent as FintechIcon } from './../assets/icons/workwithus/empty-wallet-tick.svg'
-import {ReactComponent as HospitalIcon } from './../assets/icons/workwithus/hospital.svg'
-import {ReactComponent as SchoolIcon } from './../assets/icons/workwithus/teacher.svg'
+import Wrapper from '../layout/Wrapper';
+import { ReactComponent as DownalodIcon } from './../assets/download-icon.svg';
+import { ReactComponent as BusIcon } from './../assets/icons/workwithus/bus.svg';
+import { ReactComponent as FintechIcon } from './../assets/icons/workwithus/empty-wallet-tick.svg';
+import { ReactComponent as HospitalIcon } from './../assets/icons/workwithus/hospital.svg';
+import { ReactComponent as SchoolIcon } from './../assets/icons/workwithus/teacher.svg';
+import useAnalytics from '../hooks/useAnalytics';
 
 const _data = {
-    downloadIcon: '',
-    downloadFilePath: `${process.env.PUBLIC_URL}/DiligentCompanyOverview.pdf`,
-    downloadFileName: 'Diligent Company Overview.pdf',
-    problems: [
-      {
-        id:1,
-        title:'Lack of dedication and long-term commitment',
-        paragraph:'More often than not, our clients come to realize that the only familiar face they see from the company to which they outsource is the account manager. Technical staff fluctuates, hampering team cohesion, and preventing meaningful progress and team growth - there’s little valuable knowledge accumulation in the team.'
-      },
-      {
-        id:2,
-        title:'Resources are unable to scale with what the company needs',
-        paragraph:'Dynamic of the business environment demands from our clients the ability to perform a fast-paced scale up and down of their tech teams. The delays introduced due to lack of available resources, or lack of appropriate resources, prolong the development process or stop it altogether. Inability to quickly scale down impacts the budget, flexibility in responding to unforeseen market conditions, and fast repurposing of resources.  ',
-      },
-      {
-        id:3,
-        title:'Lack of quality tech-staff that wouldn’t break a bank',
-        paragraph:'Our clients are unable to onboard enough high-quality tech resources to cover all their needs . The two main reasons for this are lack of available high-quality resources and the cost of those resources.',
-      }
-    ],
-    help: [
-      {
-        id:1,
-        title:'We outsource for a company, not a project',
-        paragraph:'All of our resources are dedicated to a single client. We provide the conditions, and expect them to put all their focus into understanding the whole of the client’s business - from high level to the details. This approach allows for knowledge accumulation and increase in value of their contribution with time.'
-      },
-      {
-        id:2,
-        title:'Long term, dedicated engineers',
-        paragraph:'Related to the previous point, our relationships with the clients tend to be very long-term. We have, where the relationship was long enough, the same resources onboarded with the same client for more than a decade. Our resources are more a part of the client’s company then they are of Diligent - Diligent is just the venue allowing them to do their job. ',
-      },
-      {
-        id:3,
-        title:'Jump right in - we know our domains',
-        paragraph:'Diligent’s resources, in business domains where we have accumulated experience, are capable of quickly producing high-value contributions to our clients. We know the concepts, we are familiar with the processes, we’ve faced the problems and solved them. If faced with something new - we’ll learn and do it quickly.'
-      },
-      {
-        id:4,
-        title:'Competitive prices',
-        paragraph:'Diligent provides a low entry price for our new clients until proven as a valuable partner. Even afterwards, once we’ve shown what we can do and contribute meaningfully to our client’s business, we tend to operate with lower fees than our competitors. Simply ask us for a bid or a pricing table and we’ll show you.'
-      }
-    ]
+  downloadIcon: '',
+  downloadFilePath: `${process.env.PUBLIC_URL}/DiligentCompanyOverview.pdf`,
+  downloadFileName: 'Diligent Company Overview.pdf',
+  problems: [
+    {
+      id: 1,
+      title: 'Lack of dedication and long-term commitment',
+      paragraph:
+        'More often than not, our clients come to realize that the only familiar face they see from the company to which they outsource is the account manager. Technical staff fluctuates, hampering team cohesion, and preventing meaningful progress and team growth - there’s little valuable knowledge accumulation in the team.',
+    },
+    {
+      id: 2,
+      title: 'Resources are unable to scale with what the company needs',
+      paragraph:
+        'Dynamic of the business environment demands from our clients the ability to perform a fast-paced scale up and down of their tech teams. The delays introduced due to lack of available resources, or lack of appropriate resources, prolong the development process or stop it altogether. Inability to quickly scale down impacts the budget, flexibility in responding to unforeseen market conditions, and fast repurposing of resources.  ',
+    },
+    {
+      id: 3,
+      title: 'Lack of quality tech-staff that wouldn’t break a bank',
+      paragraph:
+        'Our clients are unable to onboard enough high-quality tech resources to cover all their needs . The two main reasons for this are lack of available high-quality resources and the cost of those resources.',
+    },
+  ],
+  help: [
+    {
+      id: 1,
+      title: 'We outsource for a company, not a project',
+      paragraph:
+        'All of our resources are dedicated to a single client. We provide the conditions, and expect them to put all their focus into understanding the whole of the client’s business - from high level to the details. This approach allows for knowledge accumulation and increase in value of their contribution with time.',
+    },
+    {
+      id: 2,
+      title: 'Long term, dedicated engineers',
+      paragraph:
+        'Related to the previous point, our relationships with the clients tend to be very long-term. We have, where the relationship was long enough, the same resources onboarded with the same client for more than a decade. Our resources are more a part of the client’s company then they are of Diligent - Diligent is just the venue allowing them to do their job. ',
+    },
+    {
+      id: 3,
+      title: 'Jump right in - we know our domains',
+      paragraph:
+        'Diligent’s resources, in business domains where we have accumulated experience, are capable of quickly producing high-value contributions to our clients. We know the concepts, we are familiar with the processes, we’ve faced the problems and solved them. If faced with something new - we’ll learn and do it quickly.',
+    },
+    {
+      id: 4,
+      title: 'Competitive prices',
+      paragraph:
+        'Diligent provides a low entry price for our new clients until proven as a valuable partner. Even afterwards, once we’ve shown what we can do and contribute meaningfully to our client’s business, we tend to operate with lower fees than our competitors. Simply ask us for a bid or a pricing table and we’ll show you.',
+    },
+  ],
+};
 
-    
+const Segment = ({ children }) => {
+  return <div className="py-[48px] mx-auto w-full text-center">{children}</div>;
 };
 
-const Segment = ({children}) => {
+const TechCard = ({ children }) => {
   return (
-    <div className='py-[48px] mx-auto w-full text-center'>
+    <div className="rounded-[8px] bg-white py-[24px] px-[32px] items-center justify-center text-center">
       {children}
     </div>
   );
-}
-
-const TechCard = ({children}) => {
-  return (
-    <div className='rounded-[8px] bg-white py-[24px] px-[32px] items-center justify-center text-center'>
-      {children}
-    </div>
-  )
-}
-const HelpParagraph = ({title, paragraph}) => {
+};
+const HelpParagraph = ({ title, paragraph }) => {
   return (
     <div>
-      <h4 className='font-semibold text-title'>{title}</h4>
+      <h4 className="font-semibold text-title">{title}</h4>
       <p>{paragraph}</p>
     </div>
-  )
-}
+  );
+};
 
 const WorkWithUs = () => {
-
+  useAnalytics('Work With Us');
   useEffect(() => {
     document.title = 'Work With Us';
-  },[]);
+  }, []);
 
   return (
-    <div className='mt-90p'>
+    <div className="mt-90p">
       <Wrapper padding={' py-[48px]'}>
         <PageTitle heading={'Diligent at a Glance'} subheading={'work with us'} />
-        </Wrapper>
-        <div className='flex flex-col md:flex gap-[32px] w-fit mx-auto'>
-            <CustomLink href={_data.downloadFilePath} downloadFile={_data.downloadFileName} context={'Company Overview'}>
-              <p>Company Overview</p>
-              <DownalodIcon/>
-            </CustomLink>
+      </Wrapper>
+      <div className="flex flex-col md:flex gap-[32px] w-fit mx-auto">
+        <CustomLink
+          href={_data.downloadFilePath}
+          downloadFile={_data.downloadFileName}
+          context={'Company Overview'}
+        >
+          <p>Company Overview</p>
+          <DownalodIcon />
+        </CustomLink>
+      </div>
+      <Segment>
+        <p>Our clients primarily come from one of the following 4 business domains:</p>
+      </Segment>
+      <Wrapper bg padding={' py-[48px]'}>
+        <div className="flex grid grid-cols-2 lg:grid-cols-4 gap-32p items-center justify-center mx-auto">
+          <TechCard>
+            <FintechIcon className="mx-auto" />
+            <p>Fintech</p>
+          </TechCard>
+          <TechCard>
+            <HospitalIcon className="mx-auto" />
+            <p>Healthcare</p>
+          </TechCard>
+          <TechCard>
+            <BusIcon className="mx-auto" />
+            <p>Transportation</p>
+          </TechCard>
+          <TechCard>
+            <SchoolIcon className="mx-auto" />
+            <p>Education</p>
+          </TechCard>
         </div>
-        <Segment>
-          <p>Our clients primarily come from one of the following 4 business domains:</p>
-        </Segment>
-        <Wrapper bg padding={' py-[48px]'}>
-          <div className='flex grid grid-cols-2 lg:grid-cols-4 gap-32p items-center justify-center mx-auto'>
-            <TechCard>
-              <FintechIcon className='mx-auto'/>
-              <p>Fintech</p>
-            </TechCard>
-            <TechCard>
-              <HospitalIcon className='mx-auto'/>
-              <p>Healthcare</p>
-            </TechCard>
-            <TechCard>
-              <BusIcon className='mx-auto'/>
-              <p>Transportation</p>
-            </TechCard>
-            <TechCard>
-              <SchoolIcon className='mx-auto'/>
-              <p>Education</p>
-            </TechCard>
-          </div>
-        </Wrapper>
-        <Wrapper padding={' py-[48px]'}>
-          <p className='pb-32p max-w-[1000px] mx-auto'>Within those domains, our customers range from startups (11.2 Ventures), over small and medium sized companies (Gold Bullion International, Intellum…), to Fortune 500 companies (Henry Schein…).</p>
-          <p className='max-w-[1000px] mx-auto'>Decision to outsource the whole, or a part, of software development accompanied with a demand for personal, long-term, dedication and responsibility is common for our clients. Most of them have already had some experience with other outsourcing companies, or are in active relationships with other outsourcing companies, when they decide to give us a try.</p>
-        </Wrapper>
-        <Wrapper padding={' py-[48px]'}>
-          <h4 className='font-semibold font-secondary text-[#9B32CE] text-subtitle-48 text-center w-full'>What Are Their Problems?</h4>
-        </Wrapper>
-        <Wrapper >
+      </Wrapper>
+      <Wrapper padding={' py-[48px]'}>
+        <p className="pb-32p max-w-[1000px] mx-auto">
+          Within those domains, our customers range from startups (11.2 Ventures), over
+          small and medium sized companies (Gold Bullion International, Intellum…), to
+          Fortune 500 companies (Henry Schein…).
+        </p>
+        <p className="max-w-[1000px] mx-auto">
+          Decision to outsource the whole, or a part, of software development accompanied
+          with a demand for personal, long-term, dedication and responsibility is common
+          for our clients. Most of them have already had some experience with other
+          outsourcing companies, or are in active relationships with other outsourcing
+          companies, when they decide to give us a try.
+        </p>
+      </Wrapper>
+      <Wrapper padding={' py-[48px]'}>
+        <h4 className="font-semibold font-secondary text-[#9B32CE] text-subtitle-48 text-center w-full">
+          What Are Their Problems?
+        </h4>
+      </Wrapper>
+      <Wrapper>
         <section>
-              
-        
-              <div className="flex flex-col justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0 mb-[90px]">
-                <div className="flex flex-col gap-32p w-full max-w-[950px] mx-auto">
-                  {_data.problems.map((item, index) => (
-                    <CardLife
-                      key={index}
-                      number={item.id}
-                      heading={item.title}
-                      paragraph={item.paragraph}
-                    />
-                  ))}
-                </div>
-                </div>
-            </section>
-        </Wrapper>
-        <Wrapper padding={' py-[48px] mb-32p'}>
-          <h4 className='font-semibold font-secondary text-[#9B32CE] text-subtitle-48 text-center w-full'>How We Help Them?</h4>
-        </Wrapper>
-        <Wrapper padding={' py-90p'}>
+          <div className="flex flex-col justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0 mb-[90px]">
+            <div className="flex flex-col gap-32p w-full max-w-[950px] mx-auto">
+              {_data.problems.map((item, index) => (
+                <CardLife
+                  key={index}
+                  number={item.id}
+                  heading={item.title}
+                  paragraph={item.paragraph}
+                />
+              ))}
+            </div>
+          </div>
+        </section>
+      </Wrapper>
+      <Wrapper padding={' py-[48px] mb-32p'}>
+        <h4 className="font-semibold font-secondary text-[#9B32CE] text-subtitle-48 text-center w-full">
+          How We Help Them?
+        </h4>
+      </Wrapper>
+      <Wrapper padding={' py-90p'}>
         <section>
-              
-        
-              <div className="flex flex-col justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0 mb-32p">
-                <div className="flex flex-col gap-[72px] w-full max-w-[950px] mx-auto">
-                  {_data.help.map((item, index) => (
-                    <HelpParagraph
-                       key={index}
-                       title={item.title}
-                       paragraph={item.paragraph}
-                       />
-                  ))}
-                </div>
-                </div>
-            </section>
-        </Wrapper>
-        <Wrapper padding={' py-90p'} bg>
-            <h4 className='font-semibold font-secondary text-[#9B32CE] text-subtitle-48 text-center w-full py-32p'>What Our Customers Say?</h4>
-            <Testimonials noTitle />
-        </Wrapper>
-        <Wrapper padding={' py-[48px] mb-32p'}>
-          <h4 className='font-semibold font-secondary text-[#9B32CE] text-subtitle-48 text-center w-full py-32p'>Success</h4>
-          <p className='max-w-[1000px] mx-auto text-center w-full'>For us, the definition of success is a multifaceted subject. In short, we don’t declare a victory unless:</p>
-                    <ul className='mx-[72px] lg:mx-[250px]'>
-                      <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>
-                    </ul>
-        </Wrapper>
-        <Wrapper padding={' py-32p'}>
-        <div className='flex flex-col md:flex gap-[32px] w-fit mx-auto'>
-            <CustomLink href={_data.downloadFilePath} downloadFile context={'Company Overview'}>
-              <p>Company Overview</p>
-              <DownalodIcon/>
-            </CustomLink>
+          <div className="flex flex-col justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0 mb-32p">
+            <div className="flex flex-col gap-[72px] w-full max-w-[950px] mx-auto">
+              {_data.help.map((item, index) => (
+                <HelpParagraph
+                  key={index}
+                  title={item.title}
+                  paragraph={item.paragraph}
+                />
+              ))}
+            </div>
+          </div>
+        </section>
+      </Wrapper>
+      <Wrapper padding={' py-90p'} bg>
+        <h4 className="font-semibold font-secondary text-[#9B32CE] text-subtitle-48 text-center w-full py-32p">
+          What Our Customers Say?
+        </h4>
+        <Testimonials noTitle />
+      </Wrapper>
+      <Wrapper padding={' py-[48px] mb-32p'}>
+        <h4 className="font-semibold font-secondary text-[#9B32CE] text-subtitle-48 text-center w-full py-32p">
+          Success
+        </h4>
+        <p className="max-w-[1000px] mx-auto text-center w-full">
+          For us, the definition of success is a multifaceted subject. In short, we don’t
+          declare a victory unless:
+        </p>
+        <ul className="mx-[72px] lg:mx-[250px]">
+          <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>
+        </ul>
+      </Wrapper>
+      <Wrapper padding={' py-32p'}>
+        <div className="flex flex-col md:flex gap-[32px] w-fit mx-auto">
+          <CustomLink
+            href={_data.downloadFilePath}
+            downloadFile
+            context={'Company Overview'}
+          >
+            <p>Company Overview</p>
+            <DownalodIcon />
+          </CustomLink>
         </div>
-        </Wrapper>
-        
-        <Wrapper padding={' py-90p'}>
-        <ActionCard 
+      </Wrapper>
+
+      <Wrapper padding={' py-90p'}>
+        <ActionCard
           title="Let's Work Together!"
           text="We’d be happy to try and find a way to contribute to your business."
           btn2="Portfolio"
@@ -203,14 +246,9 @@ const WorkWithUs = () => {
           link2={'/portfolio'}
           link1={'/contact'}
         />
-        </Wrapper>
-       
-        
-         
+      </Wrapper>
     </div>
-    
-  )
-
-}
+  );
+};
 
-export default WorkWithUs
+export default WorkWithUs;

frontend/yarn.lock

@@ -7726,7 +7726,7 @@
     "kleur" "^3.0.3"
     "sisteransi" "^1.0.5"
 
-"prop-types@^15.0.0", "prop-types@^15.5.10", "prop-types@^15.7.2", "prop-types@^15.8.1":
+"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":
   "integrity" "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="
   "resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   "version" "15.8.1"
@@ -7882,6 +7882,11 @@
   "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"
@@ -8001,7 +8006,7 @@
   optionalDependencies:
     "fsevents" "^2.3.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":
+"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":
   "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"