Merge branch 'SEO'

frontend/public/robots.txt

@@ -1,3 +1,4 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
 Disallow:
+Sitemap: https://www.dilig.net/sitemap.txt

frontend/public/sitemap.txt

@@ -0,0 +1,15 @@
+https://www.dilig.net/
+https://www.dilig.net/portfolio
+https://www.dilig.net/casestudybi
+https://www.dilig.net/casestudystrata
+https://www.dilig.net/casestudyfinancial
+https://www.dilig.net/casestudyticketing
+https://www.dilig.net/casestudycentralized
+https://www.dilig.net/casestudyresource
+https://www.dilig.net/services
+https://www.dilig.net/about
+https://www.dilig.net/post
+https://www.dilig.net/process
+https://www.dilig.net/contact
+https://www.dilig.net/privacypolicy
+https://www.dilig.net/openday

frontend/src/App.js

@@ -1,27 +1,43 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, lazy, Suspense } from 'react';
 import './App.css';
 import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import Navigation from './components/shared/Navigation';
-import Home from './pages/Home';
-import Portfolio from './pages/Portfolio';
-import Services from './pages/Services';
-import Careers from './pages/Careers';
-import About from './pages/About';
-import BlogPost from './components/BlogPost';
+// import Home from './pages/Home';
+// import Portfolio from './pages/Portfolio';
+// import Services from './pages/Services';
+// import Careers from './pages/Careers';
+// import About from './pages/About';
+// import BlogPost from './components/BlogPost';
 import Footer from './components/shared/Footer';
 import { useRef, useState } from 'react';
-import ProcessPage from './pages/ProcessPage';
-import ContactPage from './pages/ContactPage';
-import CaseStudyBI from './pages/CaseStudyBI';
-import CaseStudyFinantial from './pages/CaseStudyFinantial';
-import CaseStudyTicketing from './pages/CaseStudyTicketing';
-import CaseStudyCentralized from './pages/CaseStudyCentralized';
-import CaseStudyResource from './pages/CaseStudyResource';
-import CaseStudyStrata from './pages/CaseStudyStrata';
-import PrivacyPolicy from './pages/PrivacyPolicy';
-import WorkWithUs from './pages/WorkWithUs';
-
-
+import Loader from './components/shared/Loader';
+// import ProcessPage from './pages/ProcessPage';
+// import ContactPage from './pages/ContactPage';
+// import CaseStudyBI from './pages/CaseStudyBI';
+// import CaseStudyFinantial from './pages/CaseStudyFinantial';
+// import CaseStudyTicketing from './pages/CaseStudyTicketing';
+// import CaseStudyCentralized from './pages/CaseStudyCentralized';
+// import CaseStudyResource from './pages/CaseStudyResource';
+// import CaseStudyStrata from './pages/CaseStudyStrata';
+// import PrivacyPolicy from './pages/PrivacyPolicy';
+// import WorkWithUs from './pages/WorkWithUs';
+
+const Home = lazy(() => import('./pages/Home'));
+const Portfolio = lazy(() => import('./pages/Portfolio'));
+const Services = lazy(() => import('./pages/Services'));
+const Careers = lazy(() => import('./pages/Careers'));
+const About = lazy(() => import('./pages/About'));
+const BlogPost = lazy(() => import('./components/BlogPost'));
+const ProcessPage = lazy(() => import('./pages/ProcessPage'));
+const ContactPage = lazy(() => import('./pages/ContactPage'));
+const CaseStudyBI = lazy(() => import('./pages/CaseStudyBI'));
+const CaseStudyFinantial = lazy(() => import('./pages/CaseStudyFinantial'));
+const CaseStudyTicketing = lazy(() => import('./pages/CaseStudyTicketing'));
+const CaseStudyCentralized = lazy(() => import('./pages/CaseStudyCentralized'));
+const CaseStudyResource = lazy(() => import('./pages/CaseStudyResource'));
+const CaseStudyStrata = lazy(() => import('./pages/CaseStudyStrata'));
+const PrivacyPolicy = lazy(() => import('./pages/PrivacyPolicy'));
+const WorkWithUs = lazy(() => import('./pages/WorkWithUs'));
 
 // Navigation Links
 const links = [
@@ -58,12 +74,10 @@ const links = [
 ];
 
 function App() {
-
-
   //tabs for contact form
   const [tab, setTab] = useState(true);
   const [tabTitle, setTabTitle] = useState('Tell Us About Your Idea!');
-  const link = useNavigate()
+  const link = useNavigate();
 
   //scroll to Contact segment
   const forwardedRef = useRef(null);
@@ -73,8 +87,7 @@ function App() {
     event.preventDefault();
     if (forwardedRef) {
       forwardedRef.current.scrollIntoView({ behavior: 'smooth' });
-    }
-    else {
+    } else {
       link('/contact');
     }
   }
@@ -90,7 +103,6 @@ function App() {
   }
 
   return (
-
     <div>
       <Navigation
         links={links}
@@ -98,37 +110,38 @@ function App() {
         activeLinks={activeLinks}
         forwardedRef={forwardedRef}
       ></Navigation>
-
-      <Routes>
-        <Route
-          exact
-          path="/"
-          element={
-            <Home
-              tab={tab}
-              tabTitle={tabTitle}
-              setTab={setTab}
-              setTabTitle={setTabTitle}
-              forwardedRef={forwardedRef}
-            />
-          }
-        />
-        <Route exact path="/portfolio" element={<Portfolio />} />
-        <Route exact path="/casestudybi" element={<CaseStudyBI />} />
-        <Route exact path="/casestudystrata" element={<CaseStudyStrata />} />
-        <Route exact path="/casestudyfinancial" element={<CaseStudyFinantial />} />
-        <Route exact path="/casestudyticketing" element={<CaseStudyTicketing />} />
-        <Route exact path="/casestudycentralized" element={<CaseStudyCentralized />} />
-        <Route exact path="/casestudyresource" element={<CaseStudyResource />} />
-        <Route exact path="/services" element={<Services />} />
-        <Route exact path="/careers" element={<Careers />} />
-        <Route exact path="/about" element={<About />} />
-        <Route exact path="/post" element={<BlogPost />} />
-        <Route exact path="/process" element={<ProcessPage />} />
-        <Route exact path="/contact" element={<ContactPage />} />
-        <Route exact path="/privacypolicy" element={<PrivacyPolicy />} />
-        <Route exact path="/workwithus" element={<WorkWithUs />} />
-      </Routes>
+      <Suspense fallback={<Loader />}>
+        <Routes>
+          <Route
+            exact
+            path="/"
+            element={
+              <Home
+                tab={tab}
+                tabTitle={tabTitle}
+                setTab={setTab}
+                setTabTitle={setTabTitle}
+                forwardedRef={forwardedRef}
+              />
+            }
+          />
+          <Route exact path="/portfolio" element={<Portfolio />} />
+          <Route exact path="/casestudybi" element={<CaseStudyBI />} />
+          <Route exact path="/casestudystrata" element={<CaseStudyStrata />} />
+          <Route exact path="/casestudyfinancial" element={<CaseStudyFinantial />} />
+          <Route exact path="/casestudyticketing" element={<CaseStudyTicketing />} />
+          <Route exact path="/casestudycentralized" element={<CaseStudyCentralized />} />
+          <Route exact path="/casestudyresource" element={<CaseStudyResource />} />
+          <Route exact path="/services" element={<Services />} />
+          <Route exact path="/careers" element={<Careers />} />
+          <Route exact path="/about" element={<About />} />
+          <Route exact path="/post" element={<BlogPost />} />
+          <Route exact path="/process" element={<ProcessPage />} />
+          <Route exact path="/contact" element={<ContactPage />} />
+          <Route exact path="/privacypolicy" element={<PrivacyPolicy />} />
+          <Route exact path="/workwithus" element={<WorkWithUs />} />
+        </Routes>
+      </Suspense>
 
       <Footer
         links={links}
@@ -136,9 +149,7 @@ function App() {
         scrollToView={scrollToView}
         forwardedRef={forwardedRef}
       />
-
     </div>
-
   );
 }
 

frontend/src/components/CardsGrid.jsx

@@ -1,28 +1,33 @@
-import React, { useEffect, useState } from "react";
-import Grid from "../layout/Grid";
-import PortfolioCard from "./PortfolioCard";
+import React, { useEffect, useState } from 'react';
+import Grid from '../layout/Grid';
+import PortfolioCard from './PortfolioCard';
 
 const api_url = process.env.REACT_APP_API_URL;
 
-const CardsGrid = ({data}) => {
-    const [state, setState] = useState(data);
+const CardsGrid = ({ data }) => {
+  const [state, setState] = useState(data);
 
+  useEffect(() => {
+    setState(data);
+  }, [data]);
 
-    useEffect(() => {
-        setState(data);
-    }, [data]);
-
-    return (
-         <div className="grid overflow-visible grid-cols-1 md:grid-cols-2 lg:grid-cols-3 auto-rows-auto gap-8">
-        { state && 
-        state.length > 0 && 
-          state.map ((item, index) => (
-            // item.attributes.img.data != null &&
-            // <PortfolioCard key={index} title={item.attributes.heading} img={api_url + item.attributes.img.data.attributes.formats.small.url} isLarge={item.attributes.IsLarge} />
-            <PortfolioCard key={index} title={item.title} isLarge={false} link={item.link} img={item.imgUrl} />          
-          ))
-          }
-        </div>
-    )
-}
-export default CardsGrid;
+  return (
+    <div className="grid overflow-visible grid-cols-1 md:grid-cols-2 lg:grid-cols-3 auto-rows-auto gap-8">
+      {state &&
+        state.length > 0 &&
+        state.map((item, index) => (
+          // item.attributes.img.data != null &&
+          // <PortfolioCard key={index} title={item.attributes.heading} img={api_url + item.attributes.img.data.attributes.formats.small.url} isLarge={item.attributes.IsLarge} />
+          <PortfolioCard
+            key={index}
+            title={item.title}
+            alt={item.alt}
+            isLarge={false}
+            link={item.link}
+            img={item.imgUrl}
+          />
+        ))}
+    </div>
+  );
+};
+export default CardsGrid;

frontend/src/components/CareerCard.jsx

@@ -1,41 +1,42 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React from 'react';
+import PropTypes from 'prop-types';
 import net from './../assets/icons/net.svg';
 
 const _card = {
-  role: ".Net Developer",
-  shortDetails: "All levels of experience",
-}
+  role: '.Net Developer',
+  shortDetails: 'All levels of experience',
+};
 
-const CareerCard = ({card ,setExpanded, setExpandedCard}) => {
+const CareerCard = ({ card, setExpanded, setExpandedCard }) => {
   return (
-    <div onClick={() => {setExpanded(true);setExpandedCard(card)}} className={'card max-w-[360px]'}>
-         
+    <div
+      onClick={() => {
+        setExpanded(true);
+        setExpandedCard(card);
+      }}
+      className={'card max-w-[360px]'}
+    >
       <img
         src={net}
-        className={
-            'ml-auto mr-auto block w-[70px] bg-baby-blue text-dark-gray'
-        }
+        alt=".NET"
+        className={'ml-auto mr-auto block w-[70px] bg-baby-blue text-dark-gray'}
       />
-      <h3 className={'mt-6 font-semibold text-2xl'}>
-        {card.role}
-      </h3>
+      <h3 className={'mt-6 font-semibold text-2xl'}>{card.role}</h3>
       <p className={'mt-6 text-sm'}>{_card.shortDetails}</p>
       <a
         href={'#'}
-        
-        className={'min-w-max btn btn_primary mt-8 opacity-0 transition-all group-hover:opacity-100 group-hover:transition-all'
+        className={
+          'min-w-max btn btn_primary mt-8 opacity-0 transition-all group-hover:opacity-100 group-hover:transition-all'
         }
       >
         Read More
       </a>
-      
     </div>
-  )
-}
+  );
+};
 
 CareerCard.propTypes = {
-    card: PropTypes.object,
-}
+  card: PropTypes.object,
+};
 
-export default CareerCard
+export default CareerCard;

frontend/src/components/Landing.jsx

@@ -1,30 +1,30 @@
-import React from "react";
-import { motion } from "framer-motion";
-import LandingSVGv2 from "./shared/graphics/LandingSVG-v2";
-import HiringWidget from "./HiringWidget";
-import Wrapper from "../layout/Wrapper";
-import OpenDayBanner from "./OpenDayBanner";
+import React from 'react';
+import { motion } from 'framer-motion';
+import LandingSVGv2 from './shared/graphics/LandingSVG-v2';
+import HiringWidget from './HiringWidget';
+import Wrapper from '../layout/Wrapper';
+import OpenDayBanner from './OpenDayBanner';
 
 const _data = {
-  cto: "contact us"
-}
+  cto: 'contact us',
+};
 const numbers = [
   {
     value: 90,
     static: '+',
-    title: 'Employees'
+    title: 'Employees',
   },
   {
     value: '20',
     static: '+',
-    title: 'Projects'
+    title: 'Projects',
   },
   {
     value: '100',
     static: '%',
-    title: 'Client-Retention'
-  }
-]
+    title: 'Client-Retention',
+  },
+];
 
 const Landing = ({ data }) => {
   return (
@@ -36,10 +36,7 @@ const Landing = ({ data }) => {
           initial={{ y: 60, opacity: 0 }}
           whileInView={{ y: 0, opacity: 1 }}
           transition={{ duration: 0.5, ease: 'easeOut' }}
-
         >
-
-
           {/* <img src={bg_home} alt="Diligent Software's Animation" width="700" /> */}
 
           {/* <LandingSVG /> */}
@@ -47,16 +44,9 @@ const Landing = ({ data }) => {
           <HiringWidget />
           <div className="mb-16 -mt-12 md:mt-5 flex flex-col lg:flex-row justify-between items-center gap-90p">
             <div className="flex flex-col gap-8p">
-              <h6 className="subheading">
-                {data.subheading}
-              </h6>
-              <h1 className="heading">
-                Software Solutions Tailored to Each Client
-              </h1>
-              <p className="paragraph">
-                {data.paragraph}
-
-              </p>
+              <h1 className="subheading">{data.subheading}</h1>
+              <h2 className="heading">Software Solutions Tailored to Each Client</h2>
+              <p className="paragraph">{data.paragraph}</p>
             </div>
             <a
               href="#contact"
@@ -65,7 +55,6 @@ const Landing = ({ data }) => {
               {_data.cto}
             </a>
           </div>
-
         </motion.section>
         <motion.section
           id="status-numbers"
@@ -76,25 +65,17 @@ const Landing = ({ data }) => {
         >
           {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>
+              <p className="display-number text-center">
+                {item.value}
+                {item.static}
+              </p>
+              <h3 className="number-title text-center">{item.title}</h3>
             </div>
           ))}
-
-
-
-
-
-
         </motion.section>
       </div>
-
     </Wrapper>
-  )
-}
+  );
+};
 
-export default Landing;
+export default Landing;

frontend/src/components/PortfolioCard.jsx

@@ -1,25 +1,23 @@
-import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 const api_url = process.env.REACT_APP_API_URL;
 
-const PortfolioCard = ({title, isLarge, link, img}) => {
-
-    const linkTo = useNavigate();
+const PortfolioCard = ({ title, isLarge, link, img, alt }) => {
+  const linkTo = useNavigate();
 
-    useEffect(() => {
-        //console.log(isLarge);
-    })
+  useEffect(() => {
+    //console.log(isLarge);
+  });
 
-    return (
-       // <div className={"card box" + (isLarge ? ' col-span-2' : '')}>
-       <a className={"card box my-2 flex- flex-col items-center"} href={link}>
-            <img src={img} className={'mb-12 mx-auto self-center'}></img>
-            <h3 className="h3-heading">{title}</h3>
-            <button className="btn text-dg-secondary mt-4">Read More</button>
-        </a>
-    )
-}
+  return (
+    // <div className={"card box" + (isLarge ? ' col-span-2' : '')}>
+    <a className={'card box my-2 flex- flex-col items-center'} href={link}>
+      <img src={img} alt={alt} className={'mb-12 mx-auto self-center'}></img>
+      <h3 className="h3-heading">{title}</h3>
+      <button className="btn text-dg-secondary mt-4">Read More</button>
+    </a>
+  );
+};
 
-export default PortfolioCard;
+export default PortfolioCard;

frontend/src/components/PortfolioSection.jsx

@@ -1,68 +1,71 @@
-import React from 'react'
-import { useNavigate } from 'react-router-dom'
-import Wrapper from '../layout/Wrapper'
-import PageTitle from './shared/PageTitle'
-import ProcessCard from './shared/ProcessCard'
-import ProcessCardsWrapper from './shared/ProcessCardWrapper'
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import Wrapper from '../layout/Wrapper';
+import PageTitle from './shared/PageTitle';
+import ProcessCard from './shared/ProcessCard';
+import ProcessCardsWrapper from './shared/ProcessCardWrapper';
 
 const _data = {
-    cards: [
-        {
-          id: 0,
-          title: 'Bi Healthcare Solution System',
-          imgUrl: 
-          'https://lh6.googleusercontent.com/D7N87i3udAln4YBp5SbaSI-9r2pVnnT5K2VT6p0G3dQanVgTMC2tdgz71PWOYco-7yQ=w2400',
-          link: '/casestudybi',
-        },
-        {
-          id: 1,
-          title: 'Resource Planning System',
-          imgUrl:
-          'https://lh5.googleusercontent.com/HLOh5coHfcEgDuftj1pOA9f1865xiIom5vyxTWNMKqMiivxL8Lg4c9ACzbfYYUdeuqQ=w2400',
-          link: '/casestudyresource',
-        },
-        {
-          id: 2,
-          title: 'Ticketing System for Passengers',
-          imgUrl:
-          'https://lh5.googleusercontent.com/f_G0H0C_qLHhsU8PBj6uTkNigzKiXzd24B_pgJ6UqVmBKlU2Lyxv2r5lf6uvY9d_0PY=w2400',
-          link: '/casestudyticketing',
-        },
-      ],
-}
+  cards: [
+    {
+      id: 0,
+      title: 'Bi Healthcare Solution System',
+      imgUrl:
+        'https://lh6.googleusercontent.com/D7N87i3udAln4YBp5SbaSI-9r2pVnnT5K2VT6p0G3dQanVgTMC2tdgz71PWOYco-7yQ=w2400',
+      alt: 'Bi Healthcare Solution System',
+      link: '/casestudybi',
+    },
+    {
+      id: 1,
+      title: 'Resource Planning System',
+      imgUrl:
+        'https://lh5.googleusercontent.com/HLOh5coHfcEgDuftj1pOA9f1865xiIom5vyxTWNMKqMiivxL8Lg4c9ACzbfYYUdeuqQ=w2400',
+      alt: 'Resource Planning System',
+      link: '/casestudyresource',
+    },
+    {
+      id: 2,
+      title: 'Ticketing System for Passengers',
+      imgUrl:
+        'https://lh5.googleusercontent.com/f_G0H0C_qLHhsU8PBj6uTkNigzKiXzd24B_pgJ6UqVmBKlU2Lyxv2r5lf6uvY9d_0PY=w2400',
+      alt: 'Ticketing System for Passengers',
+      link: '/casestudyticketing',
+    },
+  ],
+};
 
 function PortfolioSection() {
-    const linkTo = useNavigate();
+  const linkTo = useNavigate();
+
+  return (
+    <Wrapper padding={' py-90p'} bg>
+      <div className="py-32p">
+        <PageTitle left heading={'Case Studies'} subheading={'our Work'} />
+      </div>
 
-    return (
-       
-       <Wrapper padding={" py-90p"} bg>
-            <div className='py-32p'>
-            <PageTitle left heading={"Case Studies"} subheading={"our Work"} />
-            </div>
-           
-            <div className='flex flex-col lg:flex-row justify-center items-center lg:justify-between gap-8'>
-            {_data.cards.map((item,index) => (
-            <a className={"card max-w-780p box my-2 flex flex-col items-center"} href={item.link} key={index}>
-            <img src={item.imgUrl} className={'mb-12'}></img>
+      <div className="flex flex-col lg:flex-row justify-center items-center lg:justify-between gap-8">
+        {_data.cards.map((item, index) => (
+          <a
+            className={'card max-w-780p box my-2 flex flex-col items-center'}
+            href={item.link}
+            key={index}
+          >
+            <img src={item.imgUrl} alt={item.alt} className={'mb-12'}></img>
             <h3 className="h3-heading">{item.title}</h3>
             <button className="btn text-dg-secondary mt-4">Read More</button>
-        </a>
+          </a>
         ))}
-            
-            </div>
-            <div className='flex justify-center text-center'>
-                <button className="btn text-dg-secondary mt-4" onClick={()=>linkTo('/portfolio')}>See More...</button>
-
-            </div>
-       
-       </Wrapper>
-        
-       
-       
-      
-    )
-  
+      </div>
+      <div className="flex justify-center text-center">
+        <button
+          className="btn text-dg-secondary mt-4"
+          onClick={() => linkTo('/portfolio')}
+        >
+          See More...
+        </button>
+      </div>
+    </Wrapper>
+  );
 }
 
-export default PortfolioSection;
+export default PortfolioSection;

frontend/src/components/Testimonials.jsx

@@ -1,86 +1,117 @@
-import React, { Fragment, useEffect } from "react";
-import useScreenDimensions from "../hooks/useScreenDimensions";
-import Wrapper from "../layout/Wrapper";
-import FMCarousel from "./shared/FMCarousel";
-import HorizontalScroller from "./shared/HorizontalScroller";
-import PageHeading from "./shared/PageHeading";
-import PageTitle from "./shared/PageTitle";
-import TestimonialCard from "./shared/TestimonialCard";
-import Boza from "./../assets/boza.jpg"
+import React, { Fragment, useEffect } from 'react';
+import useScreenDimensions from '../hooks/useScreenDimensions';
+import Wrapper from '../layout/Wrapper';
+import FMCarousel from './shared/FMCarousel';
+import HorizontalScroller from './shared/HorizontalScroller';
+import PageHeading from './shared/PageHeading';
+import PageTitle from './shared/PageTitle';
+import TestimonialCard from './shared/TestimonialCard';
+import Boza from './../assets/boza.jpg';
 import Peter from './../assets/peter1.png';
 import ns from './../assets/ns.png';
 
 const _data = {
-    heading: "What Our Clients Said",
-    subheading: "Testimonials",
-    cards: [
-        {
-            clientName: "Peter Custer",
-            paragraph: "Diligent is a highly valuable resource in GBI's arsenal. Reliable, versatile and skilled. They are a true representation of their company name - following through the entire process of any task we challenged them with, meeting, and exceeding, expectations regardless of the project environment.",
-            clientRole: "CTO @ Gold Bullion International",
-            clientImg: Peter,
+  heading: 'What Our Clients Said',
+  subheading: 'Testimonials',
+  cards: [
+    {
+      clientName: 'Peter Custer',
+      paragraph:
+        "Diligent is a highly valuable resource in GBI's arsenal. Reliable, versatile and skilled. They are a true representation of their company name - following through the entire process of any task we challenged them with, meeting, and exceeding, expectations regardless of the project environment.",
+      clientRole: 'CTO @ Gold Bullion International',
+      clientImg: Peter,
+      alt: 'Peter Custer - CTO @ Gold Bullion International',
+    },
+    {
+      clientName: 'Božidar Ignjatović',
+      paragraph:
+        "Diligent team is my old and reliable partner. We've been working together for more than a decade. They are highly skilled professionals for any assigned job. Do not hesitate if you need support, Diligent brings additional value. They are not only tech team, they'll be partners to your business as they were for ours!",
+      clientRole: 'BadinSoft Co-Founder, CEO',
+      clientImg: Boza,
+      alt: 'Božidar Ignjatović - BadinSoft Co-Founder, CEO',
+    },
+    {
+      clientName: 'Niš Ekspres',
+      paragraph: `Our industry is susceptible, requiring the Information System to be reliable and flexible. Diligent helped us to build and integrate several parts of the existing Information System with multiple integration points and enabled fieldwork. Be assured that you can always count on the highest performance from Diligent, "around-the-clock" support and have a partner to your business.`,
+      clientRole: '',
+      clientImg: ns,
+      alt: 'Niš Ekspres',
+    },
+  ],
+};
 
-        },
-        {
-            clientName: "Božidar Ignjatović",
-            paragraph: "Diligent team is my old and reliable partner. We've been working together for more than a decade. They are highly skilled professionals for any assigned job. Do not hesitate if you need support, Diligent brings additional value. They are not only tech team, they'll be partners to your business as they were for ours!",
-            clientRole: "BadinSoft Co-Founder, CEO",
-            clientImg: Boza,
+export default function Testimonials({ noTitle }) {
+  const screenSize = useScreenDimensions();
 
-        },
-        {
-            clientName: "Niš Ekspres",
-            paragraph: `Our industry is susceptible, requiring the Information System to be reliable and flexible. Diligent helped us to build and integrate several parts of the existing Information System with multiple integration points and enabled fieldwork. Be assured that you can always count on the highest performance from Diligent, "around-the-clock" support and have a partner to your business.`,
-            clientRole: "",
-            clientImg: ns,
+  return (
+    <Wrapper padding={' py-90p'}>
+      <div className="flex flex-col gap-32p md:gap-90p w-full">
+        {!noTitle && (
+          <div className="w-full">
+            <PageTitle heading={_data.heading} subheading={_data.subheading} left />
+          </div>
+        )}
 
-        },
-    ]
-}
-
-export default function Testimonials({noTitle}) {
-    const screenSize = useScreenDimensions();
-
-    return (
-        <Wrapper padding={" py-90p"}>
-            <div className="flex flex-col gap-32p md:gap-90p w-full">
-           {!noTitle && (
-                <div className="w-full">
-                <PageTitle heading={_data.heading} subheading={_data.subheading} left />
-            </div>
-           )}
-            
-            
-
-            <div className="relative w-full h-[500px] overflow-hidden">
-            {screenSize.width > 1000 ? 
+        <div className="relative w-full h-[500px] overflow-hidden">
+          {screenSize.width > 1000 ? (
             <FMCarousel>
-                <div className="flex">
-                    <TestimonialCard clientName={_data.cards[0].clientName} clientRole={_data.cards[0].clientRole} clientImg={_data.cards[0].clientImg} paragraph={_data.cards[0].paragraph}/>
-                    <TestimonialCard clientName={_data.cards[1].clientName} clientRole={_data.cards[1].clientRole} clientImg={_data.cards[1].clientImg} paragraph={_data.cards[1].paragraph}/>
-                </div>  
-                <div className="flex">
-                    <TestimonialCard clientName={_data.cards[2].clientName} clientRole={_data.cards[2].clientRole} clientImg={_data.cards[2].clientImg} paragraph={_data.cards[2].paragraph}/>
-                </div>
-                   {/* 
+              <div className="flex">
+                <TestimonialCard
+                  clientName={_data.cards[0].clientName}
+                  clientRole={_data.cards[0].clientRole}
+                  clientImg={_data.cards[0].clientImg}
+                  imageAlt={_data.cards[0].alt}
+                  paragraph={_data.cards[0].paragraph}
+                />
+                <TestimonialCard
+                  clientName={_data.cards[1].clientName}
+                  clientRole={_data.cards[1].clientRole}
+                  clientImg={_data.cards[1].clientImg}
+                  imageAlt={_data.cards[1].alt}
+                  paragraph={_data.cards[1].paragraph}
+                />
+              </div>
+              <div className="flex">
+                <TestimonialCard
+                  clientName={_data.cards[2].clientName}
+                  clientRole={_data.cards[2].clientRole}
+                  clientImg={_data.cards[2].clientImg}
+                  imageAlt={_data.cards[2].alt}
+                  paragraph={_data.cards[2].paragraph}
+                />
+              </div>
+              {/* 
                     <TestimonialCard/>
                     <TestimonialCard/>
-                    */}  
-            </FMCarousel>    
-          : 
-          <FMCarousel>
-             <TestimonialCard clientName={_data.cards[0].clientName} clientRole={_data.cards[0].clientRole} clientImg={_data.cards[0].clientImg} paragraph={_data.cards[0].paragraph}/>
-             <TestimonialCard clientName={_data.cards[1].clientName} clientRole={_data.cards[1].clientRole} clientImg={_data.cards[1].clientImg} paragraph={_data.cards[1].paragraph}/>
-             <TestimonialCard clientName={_data.cards[2].clientName} clientRole={_data.cards[2].clientRole} clientImg={_data.cards[2].clientImg} paragraph={_data.cards[2].paragraph}/>
-          </FMCarousel>
-                }
-            </div>
-            </div>
-           
-           
-     
-        </Wrapper>
-       
-        
-    )
-}
+                    */}
+            </FMCarousel>
+          ) : (
+            <FMCarousel>
+              <TestimonialCard
+                clientName={_data.cards[0].clientName}
+                clientRole={_data.cards[0].clientRole}
+                clientImg={_data.cards[0].clientImg}
+                imageAlt={_data.cards[0].alt}
+                paragraph={_data.cards[0].paragraph}
+              />
+              <TestimonialCard
+                clientName={_data.cards[1].clientName}
+                clientRole={_data.cards[1].clientRole}
+                clientImg={_data.cards[1].clientImg}
+                imageAlt={_data.cards[1].alt}
+                paragraph={_data.cards[1].paragraph}
+              />
+              <TestimonialCard
+                clientName={_data.cards[2].clientName}
+                clientRole={_data.cards[2].clientRole}
+                clientImg={_data.cards[2].clientImg}
+                imageAlt={_data.cards[2].alt}
+                paragraph={_data.cards[2].paragraph}
+              />
+            </FMCarousel>
+          )}
+        </div>
+      </div>
+    </Wrapper>
+  );
+}

frontend/src/components/TimelineCard.jsx

@@ -1,24 +1,27 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import {ReactComponent as BrakLine} from './../assets/BreakLine.svg';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ReactComponent as BrakLine } from './../assets/BreakLine.svg';
 
-const TimelineCard = ({title, subtitle, paragraph, id}) => {
+const TimelineCard = ({ title, subtitle, paragraph, id }) => {
+  const left = id % 2 === 0;
 
-    const left = (id) % 2 === 0;
+  return (
+    <div
+      className={
+        'max-w-[450px] rounded-[32px] card-no-hover relative self-center' +
+        (left ? ' lg:self-start' : ' lg:self-end')
+      }
+    >
+      <div className="flex flex-col justify-start text-left gap-8p">
+        <h4 className="subtitle-card-italic-gray">{subtitle}</h4>
+        <h3 className="title-card capitalize text-dg-primary-900">{title}</h3>
+        <BrakLine className="my-[28px]" />
+        <p className="paragraph">{paragraph}</p>
+      </div>
+    </div>
+  );
+};
 
-    return (
-        <div className={"max-w-[450px] rounded-[32px] card-no-hover relative self-center" + (left ? " lg:self-start" : " lg:self-end")}>
-            <div className="flex flex-col justify-start text-left gap-8p">
-                <h5 className="subtitle-card-italic-gray">{subtitle}</h5>
-                <h3 className="title-card capitalize text-dg-primary-900">{title}</h3>
-                <BrakLine className='my-[28px]'/>
-                <p className="paragraph">{paragraph}</p>
-            </div>
-            
-        </div>
-    )
-}
+TimelineCard.propTypes = {};
 
-TimelineCard.propTypes = {}
-
-export default TimelineCard
+export default TimelineCard;

frontend/src/components/WhySection.jsx

@@ -1,74 +1,78 @@
-import React from "react";
+import React from 'react';
 
-import { motion } from "framer-motion";
-import OrbitOnScroll from "./shared/graphics/OrbitOnScroll";
-import PageHeading from "./shared/PageHeading";
-import WhyUsCard from "./WhyUsCard";
+import { motion } from 'framer-motion';
+import OrbitOnScroll from './shared/graphics/OrbitOnScroll';
+import PageHeading from './shared/PageHeading';
+import WhyUsCard from './WhyUsCard';
 
+import why1 from './../assets/icons/why-us-1.svg';
+import why2 from './../assets/icons/why-us-2.svg';
+import why3 from './../assets/icons/why-us-3.svg';
 
-import why1 from './../assets/icons/why-us-1.svg'
-import why2 from './../assets/icons/why-us-2.svg'
-import why3 from './../assets/icons/why-us-3.svg'
-
-import Wrapper from '../layout/Wrapper'
+import Wrapper from '../layout/Wrapper';
 
 const api_url = process.env.REACT_APP_API_URL;
 
-
 const _data = {
   heading: {
-    subheading: "Why us",
-    heading:"Dedicated and Long-lasting Partnerships",
-    paragraph1: 'Committed and loyal we build long-lasting partnerships that go beyond technology. We believe that the key to a prosperous partnership is empathy and understanding.',
-    paragraph2: "We collaborate with Fortune 500 companies, innovative start-ups, and established industry leaders. We deliver specialized software solutions and services that enable businesses to expand and face tomorrow's problems by combining world-class engineering teams, sector knowledge, and technical experts.",
+    subheading: 'Why us',
+    heading: 'Dedicated and Long-lasting Partnerships',
+    paragraph1:
+      'Committed and loyal we build long-lasting partnerships that go beyond technology. We believe that the key to a prosperous partnership is empathy and understanding.',
+    paragraph2:
+      "We collaborate with Fortune 500 companies, innovative start-ups, and established industry leaders. We deliver specialized software solutions and services that enable businesses to expand and face tomorrow's problems by combining world-class engineering teams, sector knowledge, and technical experts.",
   },
   card_left: {
     imgUrl: why1,
-    heading: "Innovative Solutions",
-    paragraph: "Technology is just one aspect of our client relationships. Enthusiasts to the core, we bring innovative and real-life solutions to each client’s problems through a deep understanding of their market, approach, and vision.",
+    alt: 'Innovative Solutions',
+    heading: 'Innovative Solutions',
+    paragraph:
+      'Technology is just one aspect of our client relationships. Enthusiasts to the core, we bring innovative and real-life solutions to each client’s problems through a deep understanding of their market, approach, and vision.',
   },
   card_mid: {
     imgUrl: why2,
-    heading: "Product Discovery",
-    paragraph: "An idea solves a problem. We help you to create that idea, build a product and scale it to be successful in your business. We develop a roadmap to make sure the development is ready to begin constructing the MVP.",
+    alt: 'Product Discovery',
+    heading: 'Product Discovery',
+    paragraph:
+      'An idea solves a problem. We help you to create that idea, build a product and scale it to be successful in your business. We develop a roadmap to make sure the development is ready to begin constructing the MVP.',
   },
   card_right: {
     imgUrl: why3,
-    heading: "End-user Engagement",
-    paragraph: "Our company helps clients to create a successful product. We focus on technical quality to ensure that products are up to standards and meet the needs of users. Innovation is key in developing products that are unique and valuable.",
-  }
-
-}
-
-
-const WhySection = ({data}) => {
+    alt: 'End-user Engagement',
+    heading: 'End-user Engagement',
+    paragraph:
+      'Our company helps clients to create a successful product. We focus on technical quality to ensure that products are up to standards and meet the needs of users. Innovation is key in developing products that are unique and valuable.',
+  },
+};
 
-    return (
-      <Wrapper bg hideOverflow>
+const WhySection = ({ data }) => {
+  return (
+    <Wrapper bg hideOverflow>
       <div className="relative">
         <div className="relative h-[1px] w-full m-auto">
-        <div className="absolute hidden lg:block" id="test" style={{ top: '800px', marginLeft: '-200px' }}>
+          <div
+            className="absolute hidden lg:block"
+            id="test"
+            style={{ top: '800px', marginLeft: '-200px' }}
+          >
             <OrbitOnScroll />
+          </div>
         </div>
-        </div>
-              
-    
-                <motion.section
-        id="why_us"
-        className=" flex flex-col items-center relative pt-164p pb-240p"
-      >
-
 
+        <motion.section
+          id="why_us"
+          className=" flex flex-col items-center relative pt-164p pb-240p"
+        >
           <div className="flex flex-col justify-center items-center gap-90p">
             <div className="max-w-[780px]">
-            <PageHeading
-              subheading={_data.heading.subheading}
-              heading={_data.heading.heading}
-              paragraph1={_data.heading.paragraph1}
-              paragraph2={_data.heading.paragraph2}
-            />
+              <PageHeading
+                subheading={_data.heading.subheading}
+                heading={_data.heading.heading}
+                paragraph1={_data.heading.paragraph1}
+                paragraph2={_data.heading.paragraph2}
+              />
             </div>
-            
+
             <div className="flex flex-col lg:flex-row gap-32p h-fit sm:px-64p lg:px-0">
               {/* Card - left */}
               <motion.div
@@ -77,9 +81,8 @@ const WhySection = ({data}) => {
                 transition={{ delay: 0, default: { duration: 0.45 } }}
               >
                 <WhyUsCard
-                  image={
-                    _data.card_left.imgUrl
-                  }
+                  image={_data.card_left.imgUrl}
+                  alt={_data.card_left.alt}
                   heading={_data.card_left.heading}
                   paragraph={_data.card_left.paragraph}
                 />
@@ -91,9 +94,8 @@ const WhySection = ({data}) => {
                 transition={{ delay: 0.27, default: { duration: 0.45 } }}
               >
                 <WhyUsCard
-                   image={
-                    _data.card_mid.imgUrl
-                  }
+                  image={_data.card_mid.imgUrl}
+                  alt={_data.card_mid.alt}
                   heading={_data.card_mid.heading}
                   paragraph={_data.card_mid.paragraph}
                 />
@@ -105,24 +107,18 @@ const WhySection = ({data}) => {
                 transition={{ delay: 0.54, default: { duration: 0.45 } }}
               >
                 <WhyUsCard
-                   image={
-                    _data.card_right.imgUrl
-                  }
+                  image={_data.card_right.imgUrl}
+                  alt={_data.card_right.alt}
                   heading={_data.card_right.heading}
                   paragraph={_data.card_right.paragraph}
                 />
               </motion.div>
             </div>
           </div>
-        
-
-
-      </motion.section>
-   
+        </motion.section>
       </div>
-      </Wrapper>
-
-    )
-}
+    </Wrapper>
+  );
+};
 
-export default WhySection;
+export default WhySection;

frontend/src/components/WhyUsCard.jsx

@@ -5,10 +5,10 @@ export default function WhyUsCard(props) {
     <div className="card-no-hover w-fit h-full flex flex-col text-center justify-between group">
       <img
         src={props.image}
-        alt="Card's Icon"
+        alt={props.alt}
         className="ml-auto mr-auto block w-2/5 bg-baby-blue text-dark-gray rounded-full"
       />
-      <h3 className="mt-6 font-semibold text-title">{props.heading}</h3>
+      <h4 className="mt-6 font-semibold text-title">{props.heading}</h4>
       <p className="mt-6 text-sm">{props.paragraph}</p>
     </div>
   );
@@ -16,6 +16,7 @@ export default function WhyUsCard(props) {
 
 WhyUsCard.propTypes = {
   image: propTypes.string,
+  alt: propTypes.string,
   heading: propTypes.string,
   paragraph: propTypes.string,
 };

frontend/src/components/shared/CardLife.jsx

@@ -1,15 +1,15 @@
 import PropTypes from 'prop-types';
 import Hex from './../../assets/icons/life/hexLife.svg';
 
-export default function CardLife({heading, paragraph, number}) {
+export default function CardLife({ heading, paragraph, number }) {
   return (
     <div className="relative flex flex-col items-start text-left card-plain w-full">
-        <div className='absolute top-8 left-2 z-10'>
-            <img src={Hex} />
-        </div>
-        <div className='absolute top-10 left-6 z-20'>
-            <p className='paragraph text-white'>{number}.</p>
-        </div>
+      <div className="absolute top-8 left-2 z-10">
+        <img src={Hex} alt="Purple hex backgorund" />
+      </div>
+      <div className="absolute top-10 left-6 z-20">
+        <p className="paragraph text-white">{number}.</p>
+      </div>
       <div className="flex flex-row justify-start items-start">
         <h2 className="text-xl font-semibold dark:text-white ml-2">{heading}</h2>
       </div>
@@ -22,4 +22,4 @@ CardLife.propTypes = {
   heading: PropTypes.string,
   paragraph: PropTypes.string,
   number: PropTypes.number,
-};
+};

frontend/src/components/shared/ClientForm.jsx

@@ -22,36 +22,45 @@ export default function ClientForm() {
 
   const validationSchema = Yup.object({
     subject: Yup.string()
-                .min(2, "Subject too short")
-                .max(50, "Subject too long")
-                .required('Subject is Required'),
+      .min(2, 'Subject too short')
+      .max(50, 'Subject too long')
+      .required('Subject is Required'),
     email: Yup.string().email('Invalid email format').required('Email is Required'),
-    firstName: Yup.string().min(2, "First name too short")
-    .max(50, "First name too long").required('First Name is Required'),
-    lastName: Yup.string().min(2, "Last name too short")
-    .max(50, "Last name too long").required('Last Name is Required'),
-    description: Yup.string().trim().min(2, "Description too short").required('Description is Required'),
+    firstName: Yup.string()
+      .min(2, 'First name too short')
+      .max(50, 'First name too long')
+      .required('First Name is Required'),
+    lastName: Yup.string()
+      .min(2, 'Last name too short')
+      .max(50, 'Last name too long')
+      .required('Last Name is Required'),
+    description: Yup.string()
+      .trim()
+      .min(2, 'Description too short')
+      .required('Description is Required'),
   });
 
   return (
     <div className="mt-10 sm:mt-0 mx-auto">
       <div className="md:grid md:grid-cols-2 md:gap-6">
-        <motion.div className="mt-5 md:mt-0 md:col-span-1"
-                  initial={{ x: -60,  opacity: 0 }}
-                  animate={{ x: 0, opacity: 1 }}
-                  exit={{ x: -60, opacity: 0 }}
-                  transition={{ duration: 0.3, ease: 'easeOut' }}>
+        <motion.div
+          className="mt-5 md:mt-0 md:col-span-1"
+          initial={{ x: -60, opacity: 0 }}
+          animate={{ x: 0, opacity: 1 }}
+          exit={{ x: -60, opacity: 0 }}
+          transition={{ duration: 0.3, ease: 'easeOut' }}
+        >
           <Formik
             initialValues={clientForm}
             validationSchema={validationSchema}
             onSubmit={values => {
               const data = {
-                  Tag: values.tag,
-                  Subject: values.subject,
-                  Email: values.email,
-                  Firstname: values.firstName,
-                  Lastname: values.lastName,
-                  Description: values.description,
+                Tag: values.tag,
+                Subject: values.subject,
+                Email: values.email,
+                Firstname: values.firstName,
+                Lastname: values.lastName,
+                Description: values.description,
               };
 
               emailjs
@@ -205,10 +214,11 @@ export default function ClientForm() {
                             Submit
                           </button>
                         </div>
-            {sucMsg && <div className={'text-sm text-right text-dg-primary-900'}>
-                                Submission Succesful! Thank you!
-                        </div> }
-                        
+                        {sucMsg && (
+                          <div className={'text-sm text-right text-dg-primary-900'}>
+                            Submission Succesful! Thank you!
+                          </div>
+                        )}
                       </div>
 
                       <div className="col-span-1 sm:col-span-1 lg:col-span-1"></div>
@@ -219,12 +229,14 @@ export default function ClientForm() {
             )}
           </Formik>
         </motion.div>
-        <motion.div className="mt-5 md:mt-0 md:col-span-1 flex items-center"
-                  initial={{ x: 60,  opacity: 0 }}
-                  animate={{ x: 0, opacity: 1 }}
-                  exit={{ x: 60, opacity: 0 }}
-                  transition={{ duration: 0.3, ease: 'easeOut' }}>
-          <img src={img} />
+        <motion.div
+          className="mt-5 md:mt-0 md:col-span-1 flex items-center"
+          initial={{ x: 60, opacity: 0 }}
+          animate={{ x: 0, opacity: 1 }}
+          exit={{ x: 60, opacity: 0 }}
+          transition={{ duration: 0.3, ease: 'easeOut' }}
+        >
+          <img src={img} alt="Our Team's image" />
         </motion.div>
       </div>
     </div>

frontend/src/components/shared/FacelessSlider/FacelessSlider.jsx

@@ -1,5 +1,11 @@
-import React from 'react'
-import { SliderProvider, SliderTrack, Slide, SliderButton, DotsNav } from '@faceless-ui/slider'
+import React from 'react';
+import {
+  SliderProvider,
+  SliderTrack,
+  Slide,
+  SliderButton,
+  DotsNav,
+} from '@faceless-ui/slider';
 import img1 from './../../../assets/images/Slider/1.png';
 import img2 from './../../../assets/images/Slider/2.png';
 import img3 from './../../../assets/images/Slider/3.png';
@@ -12,48 +18,36 @@ import img9 from './../../../assets/images/Slider/9.png';
 import img10 from './../../../assets/images/Slider/10.png';
 import './index.css';
 
-const slides = [
- img1, img2, img3, img4, img5, img6, img7, img8, img9, img10
-]
-
+const slides = [img1, img2, img3, img4, img5, img6, img7, img8, img9, img10];
 
 const FacelessSlider = () => {
   return (
-    <SliderProvider
-    slidesToShow={3}
-    autoPlay
-    scrollSnap
-    dragScroll
-  >
-    <div className={""}>
-      {/* <SliderButton direction="prev">
+    <SliderProvider slidesToShow={3} autoPlay scrollSnap dragScroll>
+      <div className={''}>
+        {/* <SliderButton direction="prev">
         Previous
       </SliderButton>
       <SliderButton direction="next">
         Next
       </SliderButton> */}
-    </div>
-    <div className='rounded-xl overflow-hidden mt-4'>
-    <SliderTrack className={" track h-full mt-10 rounded-xl"}>
-      {slides.map((slide, index) => (
-        <Slide
-          key={index}
-          index={index}
-          className={"h-full"}
-        >
-          <img src={slide} className={'w-full'}></img>
-        </Slide>
-      ))}
-    </SliderTrack>
-    </div>
-    
-    {/* <DotsNav
+      </div>
+      <div className="rounded-xl overflow-hidden mt-4">
+        <SliderTrack className={' track h-full mt-10 rounded-xl'}>
+          {slides.map((slide, index) => (
+            <Slide key={index} index={index} className={'h-full'}>
+              <img src={slide} alt="Our Team's image" className={'w-full'}></img>
+            </Slide>
+          ))}
+        </SliderTrack>
+      </div>
+
+      {/* <DotsNav
             className={"dots"}
             dotClassName={"dot"}
             activeDotClassName={"dotIsActive"}
           /> */}
-  </SliderProvider>
-  )
-}
+    </SliderProvider>
+  );
+};
 
 export default FacelessSlider;

frontend/src/components/shared/Footer.jsx

@@ -11,7 +11,6 @@ const footerText =
 const copyrightText = 'Copyright © 2022. Diligent Software. All rights reserved.';
 
 export default function Footer({ links, scrollToView, activeLinks }) {
-
   const home = useNavigate();
 
   function handleLogo() {
@@ -21,10 +20,8 @@ export default function Footer({ links, scrollToView, activeLinks }) {
   function checkUrl(event) {
     //console.log(location.pathname);
 
-    if (location.pathname === '/')
-      scrollToView(event);
-    else
-      home('/contact');
+    if (location.pathname === '/') scrollToView(event);
+    else home('/contact');
   }
 
   return (
@@ -35,7 +32,12 @@ export default function Footer({ links, scrollToView, activeLinks }) {
           alt="Social Medias Background"
           className="w-2/5 absolute opacity-50"
         />
-        <img src={logo} onClick={handleLogo} className=" w-16 pb-8 cursor-pointer" />
+        <img
+          src={logo}
+          alt="Diligent logo"
+          onClick={handleLogo}
+          className=" w-16 pb-8 cursor-pointer"
+        />
         <p className="text-sm text-gray-400 w-4/5 md:w-1/2 lg:w-1/3 text-center pb-8">
           {footerText}
         </p>
@@ -63,7 +65,12 @@ export default function Footer({ links, scrollToView, activeLinks }) {
           </div>
         </Popover.Group>
         <SocialMediaLinks divWidth="2/5" iconSize="75" iconSizeHover="95" />
-        <a href="/privacypolicy" className="underline-offset-1 text-xs text-dg-primary-600 text-center cursor-pointer pt-8 z-20">Privacy Policy</a>
+        <a
+          href="/privacypolicy"
+          className="underline-offset-1 text-xs text-dg-primary-600 text-center cursor-pointer pt-8 z-20"
+        >
+          Privacy Policy
+        </a>
         <p className="text-xs text-gray-400 text-center pt-8">{copyrightText}</p>
       </div>
     </div>

frontend/src/components/shared/JobForm.jsx

@@ -55,12 +55,18 @@ export default function JobForm(props) {
 
   const validationSchema = Yup.object({
     email: Yup.string().email('Invalid email format').required('Email is Required'),
-    firstName: Yup.string().min(2, "First name too short")
-    .max(50, "First name too long").required('First Name is Required'),
-    lastName: Yup.string().min(2, "Last name too short")
-    .max(50, "Last name too long").required('Last name is Required'),
-    coverLetter: Yup.string().trim().min(2, "Cover Letter too short").required('Cover Letter is Required'),
-
+    firstName: Yup.string()
+      .min(2, 'First name too short')
+      .max(50, 'First name too long')
+      .required('First Name is Required'),
+    lastName: Yup.string()
+      .min(2, 'Last name too short')
+      .max(50, 'Last name too long')
+      .required('Last name is Required'),
+    coverLetter: Yup.string()
+      .trim()
+      .min(2, 'Cover Letter too short')
+      .required('Cover Letter is Required'),
   });
 
   return (
@@ -84,9 +90,8 @@ export default function JobForm(props) {
                   return null;
                 } else {
                   const base64 = await convertBase64(file);
-                return base64;
+                  return base64;
                 }
-                
               };
               const convertBase64 = file => {
                 //console.log(file);
@@ -120,7 +125,7 @@ export default function JobForm(props) {
                     Link: values.link,
                     File: res,
                   };
-                
+
                   emailjs
                     .send(
                       process.env.REACT_APP_SERVICE_ID,
@@ -368,9 +373,11 @@ export default function JobForm(props) {
                             Submit
                           </button>
                         </div>
-                        {sucMsg && <div className={'text-sm text-right text-dg-primary-900'}>
-                                Submission Succesful! Thank you!
-                        </div> }
+                        {sucMsg && (
+                          <div className={'text-sm text-right text-dg-primary-900'}>
+                            Submission Succesful! Thank you!
+                          </div>
+                        )}
                       </div>
 
                       <div className="col-span-1 sm:col-span-1 lg:col-span-1"></div>
@@ -388,7 +395,7 @@ export default function JobForm(props) {
           exit={{ x: 60, opacity: 0 }}
           transition={{ duration: 0.3, ease: 'easeOut' }}
         >
-          <img src={img} />
+          <img src={img} alt="Our Team's image" />
         </motion.div>
       </div>
     </div>

frontend/src/components/shared/Navigation.jsx

@@ -18,32 +18,36 @@ export default function Navigation({ links, scrollToView, activeLinks }) {
   function checkUrl(event) {
     //console.log(location.pathname);
 
-    if (location.pathname === '/')
-      scrollToView(event);
-    else
-      home('/contact');
+    if (location.pathname === '/') scrollToView(event);
+    else home('/contact');
   }
 
-
   return (
-
     <Popover className="bg-white dark:bg-dg-primary-1700 fixed w-full top-0 z-50">
       <Wrapper>
         <div className="flex justify-between items-center border-gray-100 dark:border-dg-primary-1800 py-6 md:space-x-10">
           <div className="flex justify-start lg:w-0 lg:flex-1">
             <a href="#">
               <span className="sr-only">Diligent</span>
-              <img className="h-8 w-auto sm:h-10" src={logo} alt="diligent" onClick={()=>handleLogo()} />
+              <img
+                className="h-8 w-auto sm:h-10"
+                src={logo}
+                alt="Diligent logo"
+                onClick={() => handleLogo()}
+              />
             </a>
           </div>
           <div className="mr-2 -my-2 md:hidden">
             <Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center  text-dg-primary-900 focus:outline-none">
-              <img src={menuIcon} className='h-[30px]'/>
+              <img src={menuIcon} alt="Menu" className="h-[30px]" />
               {/*<span className="sr-only">Open menu</span>
               <div className="h-6 w-6" aria-hidden="true" />*/}
             </Popover.Button>
           </div>
-          <Popover.Group as="nav" className="hidden md:flex space-x-8 lg:space-x-10 items-center">
+          <Popover.Group
+            as="nav"
+            className="hidden md:flex space-x-8 lg:space-x-10 items-center"
+          >
             {links.map(item => (
               <NavLink
                 key={item.name}
@@ -96,7 +100,12 @@ export default function Navigation({ links, scrollToView, activeLinks }) {
               <div className="pt-5 pb-6 px-5">
                 <div className="flex items-center justify-between">
                   <div>
-                    <img className="h-8 w-auto cursor-pointer" src={logo} alt="Diligent" onClick={()=>handleLogo()} />
+                    <img
+                      className="h-8 w-auto cursor-pointer"
+                      src={logo}
+                      alt="Diligent"
+                      onClick={() => handleLogo()}
+                    />
                   </div>
                   <div className="-mr-2">
                     <Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center transition-all text-dg-primary-900 hover:text-white hover:transition-all hover:bg-dg-primary-900 focus:outline-none">
@@ -115,9 +124,7 @@ export default function Navigation({ links, scrollToView, activeLinks }) {
                         to={item.href}
                         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"
-                        />
+                        <div aria-hidden="true" />
                         <span className="ml-3 text-base font-medium text-inherit">
                           {item.name}
                         </span>
@@ -131,7 +138,6 @@ export default function Navigation({ links, scrollToView, activeLinks }) {
                       }}
                       className="contact-us-link flex justify-center items-center text-p"
                     >
-
                       <span className="ml-3 text-base font-medium text-inherit">
                         Contact
                       </span>

frontend/src/components/shared/PageHeading.jsx

@@ -3,8 +3,8 @@ import propTypes from 'prop-types';
 export default function PageHeading(props) {
   return (
     <div className="flex flex-col gap-8p items-center justify-center">
-      <h6 className="subheading">{props.subheading}</h6>
-      <h1 className="heading text-center">{props.heading}</h1>
+      <h2 className="subheading">{props.subheading}</h2>
+      <h3 className="heading text-center">{props.heading}</h3>
       <div className="flex flex-col gap-16p">
         <p className="paragraph text-start">{props.paragraph1}</p>
         <p className="paragraph text-start">{props.paragraph2}</p>

frontend/src/components/shared/ProcessCard.jsx

@@ -1,22 +1,35 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
 
-const ProcessCard = ({numeric, id, title, subtitle, text}) => {
-    const [paragraphs, setParagraphs] = useState([]);
-    const left = (id-1) % 2 === 0;
+const ProcessCard = ({ numeric, id, title, subtitle, text }) => {
+  const [paragraphs, setParagraphs] = useState([]);
+  const left = (id - 1) % 2 === 0;
 
-    useEffect(() => {
-        setParagraphs(text);
-    },[text]);
-    return (
-        <div className={"max-w-[700px] rounded-[32px] card-no-hover relative overflow-hidden" + (left ? " self-start" : " self-end")}>
-            {numeric && <div className="absolute top-0 left-0 py-3 px-6 bg-dg-primary-900 text-white leaf">{id}</div>}
-            <div className="flex flex-col justify-start text-left gap-8p">
-                <h3 className="title-card">{title}</h3>
-                <h5 className="subtitle-card-italic">{subtitle}</h5>
-                {paragraphs && paragraphs.map((item, index) => <p className="paragraph" key={index}>{item.paragraph}</p>)}
-            </div>
-            
+  useEffect(() => {
+    setParagraphs(text);
+  }, [text]);
+  return (
+    <div
+      className={
+        'max-w-[700px] rounded-[32px] card-no-hover relative overflow-hidden' +
+        (left ? ' self-start' : ' self-end')
+      }
+    >
+      {numeric && (
+        <div className="absolute top-0 left-0 py-3 px-6 bg-dg-primary-900 text-white leaf">
+          {id}
         </div>
-    )
-}
+      )}
+      <div className="flex flex-col justify-start text-left gap-8p">
+        <h3 className="title-card">{title}</h3>
+        <h4 className="subtitle-card-italic">{subtitle}</h4>
+        {paragraphs &&
+          paragraphs.map((item, index) => (
+            <p className="paragraph" key={index}>
+              {item.paragraph}
+            </p>
+          ))}
+      </div>
+    </div>
+  );
+};
 export default ProcessCard;

frontend/src/components/shared/ProcessFacelessSlider.jsx

@@ -1,66 +1,56 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Slide, SliderButton, SliderProvider, SliderTrack } from '@faceless-ui/slider'
-import {ReactComponent as CircleArrow } from '../../assets/icons/CircleArrow.svg';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Slide, SliderButton, SliderProvider, SliderTrack } from '@faceless-ui/slider';
+import { ReactComponent as CircleArrow } from '../../assets/icons/CircleArrow.svg';
 
 import ProcessSvgPart1 from './../../assets/ProcessPart1.svg';
 import ProcessSvgPart2 from './../../assets/ProcessPart2.svg';
 import ProcessSvgPart3 from './../../assets/ProcessPart3.svg';
 
-const slides = [
-    ProcessSvgPart1, ProcessSvgPart2, ProcessSvgPart3
-]
-
+const slides = [ProcessSvgPart1, ProcessSvgPart2, ProcessSvgPart3];
 
 const ProcessFacelessSlider = props => {
-
-    return (
-      <SliderProvider
-    slidesToShow={1}
-    scrollSnap
-    dragScroll
-  >
-   
-    <div className={""}>
-      {/* <SliderButton direction="prev">
+  return (
+    <SliderProvider slidesToShow={1} scrollSnap dragScroll>
+      <div className={''}>
+        {/* <SliderButton direction="prev">
         Previous
       </SliderButton>
       <SliderButton direction="next">
         Next
       </SliderButton> */}
-    </div>
-    <div className='rounded-xl overflow-hidden mt-4'>
-    <SliderTrack className={" track h-full mt-10 rounded-xl"}>
-      {slides.map((slide, index) => (
-        <Slide
-          key={index}
-          index={index}
-          className={"h-full"}
-        >
-          <img src={slide} className={'h-full mx-auto'}></img>
-        </Slide>
-      ))}
-    </SliderTrack>
-    </div>
-    <div className='flex justify-between w-2/5 mt-8 mx-auto'>
-        
+      </div>
+      <div className="rounded-xl overflow-hidden mt-4">
+        <SliderTrack className={' track h-full mt-10 rounded-xl'}>
+          {slides.map((slide, index) => (
+            <Slide key={index} index={index} className={'h-full'}>
+              <img
+                src={slide}
+                alt={`step ${index + 1}`}
+                className={'h-full mx-auto'}
+              ></img>
+            </Slide>
+          ))}
+        </SliderTrack>
+      </div>
+      <div className="flex justify-between w-2/5 mt-8 mx-auto">
         <SliderButton direction="prev">
-            <CircleArrow />
-          </SliderButton>
-          <SliderButton direction="next">
-            <CircleArrow className='rotate-180' />
-          </SliderButton>
-        </div>
-    
-    {/* <DotsNav
+          <CircleArrow />
+        </SliderButton>
+        <SliderButton direction="next">
+          <CircleArrow className="rotate-180" />
+        </SliderButton>
+      </div>
+
+      {/* <DotsNav
             className={"dots"}
             dotClassName={"dot"}
             activeDotClassName={"dotIsActive"}
           /> */}
-  </SliderProvider>
-      )
-}
+    </SliderProvider>
+  );
+};
 
-ProcessFacelessSlider.propTypes = {}
+ProcessFacelessSlider.propTypes = {};
 
-export default ProcessFacelessSlider
+export default ProcessFacelessSlider;

frontend/src/components/shared/TestimonialCard/index.jsx

@@ -1,27 +1,39 @@
-import React from "react";
-import { ReactComponent as TestemonialsSVG } from "../../../assets/graphics/TestemonialsSVG.svg";
+import React from 'react';
+import { ReactComponent as TestemonialsSVG } from '../../../assets/graphics/TestemonialsSVG.svg';
 
+export default function TestimonialCard({
+  paragraph,
+  clientName,
+  clientRole,
+  clientImg,
+  imageAlt,
+}) {
+  const cardClassList =
+    'px-12 py-12 bg-white dark:bg-dg-primary-1700 text-dark-gray dark:text-white shadow-md dark:border-dg-primary-1500 dark:border-solid dark:border text-center rounded-xl';
 
-export default function TestimonialCard({paragraph, clientName, clientRole, clientImg}) {
-    const cardClassList = 'px-12 py-12 bg-white dark:bg-dg-primary-1700 text-dark-gray dark:text-white shadow-md dark:border-dg-primary-1500 dark:border-solid dark:border text-center rounded-xl'; 
-    
-    return (
-        <div className="relative h-fit md:mr-90p">
-            <div className="absolute z-20 -bottom-[120px] -right-[90px] hidden md:block">
-                    <TestemonialsSVG />
-                <div className="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center">
-                
-                <img src={clientImg} className='mx-auto' style={{margin: '2px 2px 40px 20px', height:64, width:64, borderRadius:'50%'}}/>
-                    
-                </div>
-                
-            </div>
-             <div className={cardClassList + ' flex flex-col justify-between max-w-[460px]'}>
-                 <p className="text-p-italic italic text-gray-500">"{paragraph}"</p>
-                 <h4 className="text-dg-primary-900">{clientName}</h4>
-                 <p>{clientRole}</p>
-            </div>
+  return (
+    <div className="relative h-fit md:mr-90p">
+      <div className="absolute z-20 -bottom-[120px] -right-[90px] hidden md:block">
+        <TestemonialsSVG />
+        <div className="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center">
+          <img
+            src={clientImg}
+            alt={imageAlt}
+            className="mx-auto"
+            style={{
+              margin: '2px 2px 40px 20px',
+              height: 64,
+              width: 64,
+              borderRadius: '50%',
+            }}
+          />
         </div>
-           
-    )
-}
+      </div>
+      <div className={cardClassList + ' flex flex-col justify-between max-w-[460px]'}>
+        <p className="text-p-italic italic text-gray-500">"{paragraph}"</p>
+        <h4 className="text-dg-primary-900">{clientName}</h4>
+        <p>{clientRole}</p>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/About.jsx

@@ -14,7 +14,7 @@ import Ideas from './../assets/icons/values/ideas.svg';
 
 import NisExpress from '../assets/NE_large_logo.png';
 
-import Djole from './../'
+import Djole from './../';
 import valuesBG from './../assets/ValuesBG.svg';
 import TimelineCardsWrapper from '../components/TimelineWrapper';
 import TimelineCard from '../components/TimelineCard';
@@ -25,191 +25,205 @@ import TimelineLogo from '../components/TimelineLogo';
 import PageLayout from '../layout/PageLayout';
 const _data = {
   heading: {
-    subheading: "About Us",
-    heading: "Who We Are",
-    imgUrl: 'https://lh6.googleusercontent.com/nCX_ne2JiqAAQqxF2ObEIA6EmP_cl6BciWQUqGaIzrgvv83Eo4nhzcqyZw_pYNxnByo=w2400',
-    paragraph: "When ten enthusiasts came together in 2020 with the same vision and impactful goals our journey officially began. We believed that taking small steps could result in meaningful changes and help us succeed in areas of a global pandemic and rapid social changes."
+    subheading: 'About Us',
+    heading: 'Who We Are',
+    imgUrl:
+      'https://lh6.googleusercontent.com/nCX_ne2JiqAAQqxF2ObEIA6EmP_cl6BciWQUqGaIzrgvv83Eo4nhzcqyZw_pYNxnByo=w2400',
+    paragraph:
+      'When ten enthusiasts came together in 2020 with the same vision and impactful goals our journey officially began. We believed that taking small steps could result in meaningful changes and help us succeed in areas of a global pandemic and rapid social changes.',
   },
   segment1: {
-    paragraph: "Diligent Software is a collaborative software development team that delivers high-quality custom software solutions while also cultivating a work environment that promotes community, family, learning, and mentoring.",
-    imgUrl: "https://lh5.googleusercontent.com/YD0JCH9v2hZ2_M42T7QD4U1CbTPolaelasj0SJF8kDQQiuRFmO9lLukjxfBqg5dxHsY=w2400",
+    paragraph:
+      'Diligent Software is a collaborative software development team that delivers high-quality custom software solutions while also cultivating a work environment that promotes community, family, learning, and mentoring.',
+    imgUrl:
+      'https://lh5.googleusercontent.com/YD0JCH9v2hZ2_M42T7QD4U1CbTPolaelasj0SJF8kDQQiuRFmO9lLukjxfBqg5dxHsY=w2400',
   },
   segment2: {
-    paragraph: "By utilizing cutting-edge technologies, our agile, multi-disciplinary teams provide a combination of product & technology strategies, intelligent experiences, and world-class engineering to help our clients become more engaging, responsive, and efficient.",
-    imgUrl: "https://lh6.googleusercontent.com/WEoQNbjwT9EpeG2kM4pvdeJM4MwFoEnSj2Dn0e3vPM54iN6P911_Y0wAXvSsbspd3Lg=w2400",
+    paragraph:
+      'By utilizing cutting-edge technologies, our agile, multi-disciplinary teams provide a combination of product & technology strategies, intelligent experiences, and world-class engineering to help our clients become more engaging, responsive, and efficient.',
+    imgUrl:
+      'https://lh6.googleusercontent.com/WEoQNbjwT9EpeG2kM4pvdeJM4MwFoEnSj2Dn0e3vPM54iN6P911_Y0wAXvSsbspd3Lg=w2400',
   },
-  subtitle: "Diligent has close to 100 employees located throughout Serbia.",
-  subtitleImgUrl: "https://lh5.googleusercontent.com/Nk7pWU1H028YvdMkXvH6CECmQVWtTuKpKQuTUTKzUVXfhCF1JAjXThy1585YnXYdWio=w2400",
-  italicParagraph: "We understand that investing in long-term customer relationships is essential, but we also recognize the importance of providing rewarding and challenging careers for our employees.",
+  subtitle: 'Diligent has close to 100 employees located throughout Serbia.',
+  subtitleImgUrl:
+    'https://lh5.googleusercontent.com/Nk7pWU1H028YvdMkXvH6CECmQVWtTuKpKQuTUTKzUVXfhCF1JAjXThy1585YnXYdWio=w2400',
+  italicParagraph:
+    'We understand that investing in long-term customer relationships is essential, but we also recognize the importance of providing rewarding and challenging careers for our employees.',
   segment3: {
     mission: {
-      title: "Our Vision",
-      imgUrl:"https://lh5.googleusercontent.com/IdGSbzSZ8fRwwkP43Lkzm3fQBRGqywFNpfi2Qe2bkstNXunQGM1zVFrdX4blaiSGuEM=w2400",
+      title: 'Our Vision',
+      imgUrl:
+        'https://lh5.googleusercontent.com/IdGSbzSZ8fRwwkP43Lkzm3fQBRGqywFNpfi2Qe2bkstNXunQGM1zVFrdX4blaiSGuEM=w2400',
       paragraphs: [
         {
-          paragraph: "Our vision is to be a leading software solutions company for a variety of industries. We believe that our growth is directly related to the success of our customers, so we are dedicated to helping them achieve their business goals. "
+          paragraph:
+            'Our vision is to be a leading software solutions company for a variety of industries. We believe that our growth is directly related to the success of our customers, so we are dedicated to helping them achieve their business goals. ',
         },
         {
-          paragraph: "We want to be known as a reliable, innovative, and top-quality software service provider in the IT industry. We are constantly striving to exceed the expectations of our customers and to be the best in our field. "
-        }
+          paragraph:
+            'We want to be known as a reliable, innovative, and top-quality software service provider in the IT industry. We are constantly striving to exceed the expectations of our customers and to be the best in our field. ',
+        },
       ],
     },
     vision: {
-      title: "Our Mission",
-      imgUrl: "https://lh3.googleusercontent.com/gqO6y406jsrU5mt2c2rcbZS-2Z6Q9rg2zxHQ576LExMo1ptRx-SVZj2iAkR1wg2lNF0=w2400",
+      title: 'Our Mission',
+      imgUrl:
+        'https://lh3.googleusercontent.com/gqO6y406jsrU5mt2c2rcbZS-2Z6Q9rg2zxHQ576LExMo1ptRx-SVZj2iAkR1wg2lNF0=w2400',
       paragraphs: [
         {
-          paragraph: "Our mission is to help our customers grow their businesses through creative design and development solutions. We strive to deliver market-defining high-quality solutions that create value and competitive advantage for our customers around the world."
+          paragraph:
+            'Our mission is to help our customers grow their businesses through creative design and development solutions. We strive to deliver market-defining high-quality solutions that create value and competitive advantage for our customers around the world.',
         },
         {
-          paragraph: "We are dedicated to providing our clients with the best possible service and continually improving our processes and capabilities to better meet their needs. "
-        }
+          paragraph:
+            'We are dedicated to providing our clients with the best possible service and continually improving our processes and capabilities to better meet their needs. ',
+        },
       ],
-    }
+    },
   },
   values: {
-    heading: "Values",
-    cards:   [
+    heading: 'Values',
+    cards: [
       {
-        id:0,
+        id: 0,
         iconUrl: Care,
-        title:"Care",
-        paragraph: "We believe that by working together and being kind to one another, we can make a difference. We care about work colleagues, ourselves, partnerships, but also the planet. We constantly strive to be helpful, kind, and inclusive in everything we do and looking for ways to be more sustainable. "
+        title: 'Care',
+        paragraph:
+          'We believe that by working together and being kind to one another, we can make a difference. We care about work colleagues, ourselves, partnerships, but also the planet. We constantly strive to be helpful, kind, and inclusive in everything we do and looking for ways to be more sustainable. ',
       },
       {
-        id:1,
+        id: 1,
         iconUrl: Culture,
-        title:"Culture",
-        paragraph: "Our people love what they do. We provide a fun and supportive environment that empowers our staff to grow, learn, and thrive. We are consistent and transparent in our actions and committed to our clients and colleagues. We believe that together we can achieve more."
+        title: 'Culture',
+        paragraph:
+          'Our people love what they do. We provide a fun and supportive environment that empowers our staff to grow, learn, and thrive. We are consistent and transparent in our actions and committed to our clients and colleagues. We believe that together we can achieve more.',
       },
       {
-        id:2,
+        id: 2,
         iconUrl: Doing,
-        title:"Learn by Doing",
-        paragraph: "Our legacy is our impact on the people around us. By being kind and helping others, we can make a positive difference and leave a lasting impression. We grow as individuals, as well as we grow as a team."
+        title: 'Learn by Doing',
+        paragraph:
+          'Our legacy is our impact on the people around us. By being kind and helping others, we can make a positive difference and leave a lasting impression. We grow as individuals, as well as we grow as a team.',
       },
       {
-        id:3,
+        id: 3,
         iconUrl: Ideas,
-        title:"Ideas Over Hierarchy",
-        paragraph: "We believe that the best ideas can come from anywhere, both inside and outside our company. Our job is to seek out those ideas, shape and improve them through candid debate, and take them from concept to action."
-      }
+        title: 'Ideas Over Hierarchy',
+        paragraph:
+          'We believe that the best ideas can come from anywhere, both inside and outside our company. Our job is to seek out those ideas, shape and improve them through candid debate, and take them from concept to action.',
+      },
     ],
   },
-  
+
   partners: {
-    title: "Partners",
-    paragraph: "We collaborate with Fortune 500 companies, innovative start-ups, and established industry leaders. We deliver specialized software solutions and services that enable businesses to expand and face tomorrow's problems by combining world-class engineering teams, sector knowledge, and technical experts.",
+    title: 'Partners',
+    paragraph:
+      "We collaborate with Fortune 500 companies, innovative start-ups, and established industry leaders. We deliver specialized software solutions and services that enable businesses to expand and face tomorrow's problems by combining world-class engineering teams, sector knowledge, and technical experts.",
     icons: [
-      "https://lh4.googleusercontent.com/e5Zf5H4bL-6N4R7TOJIlB7hAPzzIk41dnWlCvJDZKAWyyjbJ_kWmONzHqddi11rb_SA=w2400",
-      "https://lh6.googleusercontent.com/4QxTBdL0JdRHjbujuHSEO9ysyQL7N64bykQm4DutzoAB0MOIYBODgShJ9uSChiI1kHo=w2400",
+      'https://lh4.googleusercontent.com/e5Zf5H4bL-6N4R7TOJIlB7hAPzzIk41dnWlCvJDZKAWyyjbJ_kWmONzHqddi11rb_SA=w2400',
+      'https://lh6.googleusercontent.com/4QxTBdL0JdRHjbujuHSEO9ysyQL7N64bykQm4DutzoAB0MOIYBODgShJ9uSChiI1kHo=w2400',
       NisExpress,
-      "https://lh6.googleusercontent.com/8TrErMJ6QyxdwhmM57Oiy-41Db7thyvaHmGfb4teaFiYKWFVDd3reL1Ok1T88nAgvaE=w2400",
-      "https://lh4.googleusercontent.com/D05_HBhHcJf8Rpbxf7Uc4ix_J4advqIFM6Rwe-Vd9huTQCt2JKocAKqAf_AwszThr2Y=w2400",
-    ]
+      'https://lh6.googleusercontent.com/8TrErMJ6QyxdwhmM57Oiy-41Db7thyvaHmGfb4teaFiYKWFVDd3reL1Ok1T88nAgvaE=w2400',
+      'https://lh4.googleusercontent.com/D05_HBhHcJf8Rpbxf7Uc4ix_J4advqIFM6Rwe-Vd9huTQCt2JKocAKqAf_AwszThr2Y=w2400',
+    ],
   },
   industries: {
-    title:"Industries",
+    title: 'Industries',
     industries: [
-    {
-      title: "Fintech",
-      paragraph: "We help fintech startups and financial institutions to manage risk and stay ahead of the curve by developing financial software solutions and integrating them with third-party systems while ensuring the stable operation of financial systems.",
-      imgUrl: 'https://lh6.googleusercontent.com/hNzi8UOWwAYzL9ZFR5bPnhge1RCIPgaFDwvZ-Cz7jaIRzKOySxZi2duV5-plTpGczLE=w2400',
-      
-    },
-    {
-      title: "Healthcare",
-      paragraph: "We provide the healthcare sector with seamless transitions from an offline business to a tailored digital platform. All with the assistance of cutting-edge technology to enhance the user experience and improve health care delivery.",
-      imgUrl: 'https://lh4.googleusercontent.com/8xQPhJ2FZrTFamSUf2EkpL_vsvjAFymUEEX4PWF-R4Mhznt6vo2kkYCHY4gZCF5XjYs=w2400',
-    },
-  ],
+      {
+        title: 'Fintech',
+        paragraph:
+          'We help fintech startups and financial institutions to manage risk and stay ahead of the curve by developing financial software solutions and integrating them with third-party systems while ensuring the stable operation of financial systems.',
+        imgUrl:
+          'https://lh6.googleusercontent.com/hNzi8UOWwAYzL9ZFR5bPnhge1RCIPgaFDwvZ-Cz7jaIRzKOySxZi2duV5-plTpGczLE=w2400',
+      },
+      {
+        title: 'Healthcare',
+        paragraph:
+          'We provide the healthcare sector with seamless transitions from an offline business to a tailored digital platform. All with the assistance of cutting-edge technology to enhance the user experience and improve health care delivery.',
+        imgUrl:
+          'https://lh4.googleusercontent.com/8xQPhJ2FZrTFamSUf2EkpL_vsvjAFymUEEX4PWF-R4Mhznt6vo2kkYCHY4gZCF5XjYs=w2400',
+      },
+    ],
   },
   timeline: {
-    subtitle: "our journey",
-    title: "Timeline of Our Growth",
+    subtitle: 'our journey',
+    title: 'Timeline of Our Growth',
     cards: [
       {
-        subtitle: "1st Step",
-        title: "First Year of Our Work",
-        paragraph: "Our journey began two years ago when a group of ten tech enthusiasts made the decision to put their ideas into practice and accomplish their goals. With more than ten years of technology experience in a variety of industries, including fintech, transportation, and healthcare,  they created a modern company that can deliver solutions tailored to each client. "
+        subtitle: '1st Step',
+        title: 'First Year of Our Work',
+        paragraph:
+          'Our journey began two years ago when a group of ten tech enthusiasts made the decision to put their ideas into practice and accomplish their goals. With more than ten years of technology experience in a variety of industries, including fintech, transportation, and healthcare,  they created a modern company that can deliver solutions tailored to each client. ',
       },
       {
-        subtitle: "2nd Step",
-        title: "Choosing our clients",
-        paragraph: "We strive to build strong partnerships with our clients. We can proudly say that our biggest value is a long-lasting partnership with our very first clients. Good impressions and commitment lead us to the first clients. Furthermore, we continue to build long-term partnerships. "
+        subtitle: '2nd Step',
+        title: 'Choosing our clients',
+        paragraph:
+          'We strive to build strong partnerships with our clients. We can proudly say that our biggest value is a long-lasting partnership with our very first clients. Good impressions and commitment lead us to the first clients. Furthermore, we continue to build long-term partnerships. ',
       },
       {
-        subtitle: "3rd Step",
-        title: "Overcoming hard times",
-        paragraph: "As the COVID-19 pandemic was taking off, we were extremely impressed by how well our team adapted to the changing circumstances. Diligent’s greatest strengths have always been our team of highly qualified and experienced professionals. Diligent team increased from 35 employees to 67 technology experts."
+        subtitle: '3rd Step',
+        title: 'Overcoming hard times',
+        paragraph:
+          'As the COVID-19 pandemic was taking off, we were extremely impressed by how well our team adapted to the changing circumstances. Diligent’s greatest strengths have always been our team of highly qualified and experienced professionals. Diligent team increased from 35 employees to 67 technology experts.',
       },
       {
-        subtitle: "4th Step",
-        title: "Where We Are Today",
-        paragraph: "We are constantly growing, coding the vision of the future! Today we are about to have 100 employees who diligently work on more than 50 projects, trying to give cutting-edge solutions to the most common and modern problems. Our partnerships with the clients are based on trust and commitment."
+        subtitle: '4th Step',
+        title: 'Where We Are Today',
+        paragraph:
+          'We are constantly growing, coding the vision of the future! Today we are about to have 100 employees who diligently work on more than 50 projects, trying to give cutting-edge solutions to the most common and modern problems. Our partnerships with the clients are based on trust and commitment.',
       },
       {
-        subtitle: "5th Step",
-        title: "road to future success",
-        paragraph: "Professional and personal growth and development of our employees are crucial for strengthening our team. We strive hard to offer high-quality education, mentoring, and an inspiring environment where everyone may reach their full potential. This will enable us to progress as a team and achieve our long-term goals."
-      }
-    ]
-  }
-
-  
-
-
-}
+        subtitle: '5th Step',
+        title: 'road to future success',
+        paragraph:
+          'Professional and personal growth and development of our employees are crucial for strengthening our team. We strive hard to offer high-quality education, mentoring, and an inspiring environment where everyone may reach their full potential. This will enable us to progress as a team and achieve our long-term goals.',
+      },
+    ],
+  },
+};
 
 export default function About() {
-
   useEffect(() => {
     document.title = 'About Us';
-  },[]);
+  }, []);
 
   return (
     <PageLayout>
       <div className="bg-white dark:bg-dg-primary-1700 w-full pt-32">
         {/* Heading Section */}
         <section
-        id="heading"
-        className="flex flex-col items-center justify-center max-w-custom m-auto"
-      >
+          id="heading"
+          className="flex flex-col items-center justify-center max-w-custom m-auto"
+        >
           <div className="mb-8 flex flex-col md:flex-row justify-start items-start w-full px-8 xl:px-0">
             <div className="w-full md:w-1/2 md:pr-16">
-              <h6 className="subheading">
-                {_data.heading.subheading}
-              </h6>
-              <h1 className="heading text-dg-secondary mt-2">
-                {_data.heading.heading}
-              </h1>
-              <p className="paragraph mt-4">
-                {_data.heading.paragraph}
-              </p>
+              <h6 className="subheading">{_data.heading.subheading}</h6>
+              <h1 className="heading text-dg-secondary mt-2">{_data.heading.heading}</h1>
+              <p className="paragraph mt-4">{_data.heading.paragraph}</p>
             </div>
             <img
-            src={_data.heading.imgUrl}
-            alt="Our Team's image"
-            className="w-full md:w-1/2 text-center"
-          />
+              src={_data.heading.imgUrl}
+              alt="Our Team's image"
+              className="w-full md:w-1/2 text-center"
+            />
           </div>
         </section>
 
         {/* The After Heading pt.1 Section */}
         <section
-        id="after_heading"
-        className="bg-white dark:bg-dg-primary-1700 flex items-center justify-center px-2"
-      >
+          id="after_heading"
+          className="bg-white dark:bg-dg-primary-1700 flex items-center justify-center px-2"
+        >
           <div className="my-8 flex flex-col-reverse md:flex-row justify-center items-center max-w-custom m-auto w-full  px-8 xl:px-0">
             <img
-            src={_data.segment1.imgUrl}
-            alt="Our Team's image"
-            className="w-full md:w-1/2 text-center mt-8 md:mt-0"
-          />
+              src={_data.segment1.imgUrl}
+              alt="Our Team's image"
+              className="w-full md:w-1/2 text-center mt-8 md:mt-0"
+            />
             <div className="w-full md:w-1/2 md:pl-16">
-              <p className="paragraph mt-4">
-                {_data.segment1.paragraph}
-              </p>
+              <p className="paragraph mt-4">{_data.segment1.paragraph}</p>
             </div>
           </div>
         </section>
@@ -218,20 +232,21 @@ export default function About() {
         <section id="after_heading" className="flex flex-col items-center justify-center">
           <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">
-              <p className="paragraph mt-4">
-                {_data.segment2.paragraph}
-              </p>
+              <p className="paragraph mt-4">{_data.segment2.paragraph}</p>
             </div>
             <img
-            src={_data.segment2.imgUrl}
-            alt="Office's image"
-            className="w-full md:w-1/2 text-center"
-          />
+              src={_data.segment2.imgUrl}
+              alt="Office's image"
+              className="w-full md:w-1/2 text-center"
+            />
           </div>
         </section>
 
         {/* Highlighted Text Section */}
-        <section id="highlight" className="flex flex-col items-center justify-center mt-16">
+        <section
+          id="highlight"
+          className="flex flex-col items-center justify-center mt-16"
+        >
           <HighlighedText text={_data.subtitle} />
         </section>
 
@@ -239,10 +254,10 @@ export default function About() {
         <section id="info" className="flex flex-col items-center justify-center mt-16">
           <div className="flex flex-col items-center justify-center w-full">
             <img
-            src={_data.subtitleImgUrl}
-            alt="Info image"
-            className="max-w-[660px] w-full"
-          />
+              src={_data.subtitleImgUrl}
+              alt="Info image"
+              className="max-w-[660px] w-full"
+            />
             <p className="text-sm font-medium italic text-gray-500 dark:text-white w-2/3 lg:w-1/3 mt-4">
               {_data.italicParagraph}
             </p>
@@ -251,149 +266,139 @@ export default function About() {
 
         {/* Our Mission & Our Vision Section */}
         <section
-        id="mission_vision"
-        className="bg-baby-blue dark:bg-dg-primary-1600 flex flex-col items-center justify-center mt-16"
-      >
+          id="mission_vision"
+          className="bg-baby-blue dark:bg-dg-primary-1600 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">
-              <h1 className="heading text-dg-secondary">{_data.segment3.vision.title}</h1>
-              {_data.segment3.vision.paragraphs.map((item,index) => (
+              <h2 className="heading text-dg-secondary">{_data.segment3.vision.title}</h2>
+              {_data.segment3.vision.paragraphs.map((item, index) => (
                 <p key={index} className="paragraph mt-4">
                   {item.paragraph}
                 </p>
-            )
-            )}
+              ))}
             </div>
             <img
-            src={_data.segment3.mission.imgUrl}
-            alt="Our mission image"
-            className="text-center w-full md:w-1/2"
-          />
+              src={_data.segment3.mission.imgUrl}
+              alt="Our mission image"
+              className="text-center w-full md:w-1/2"
+            />
           </div>
           <div className="my-8 flex flex-col-reverse md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
             <img
-            src={_data.segment3.vision.imgUrl}
-            alt="Our vision image"
-            className="text-center w-full md:w-1/2 mt-8 md:mt-0"
-          />
+              src={_data.segment3.vision.imgUrl}
+              alt="Our vision image"
+              className="text-center w-full md:w-1/2 mt-8 md:mt-0"
+            />
             <div className="w-full md:w-1/2 md:pl-16">
-              <h1 className="heading text-dg-secondary">{_data.segment3.mission.title}</h1>
-              {_data.segment3.mission.paragraphs.map((item,index) => (
+              <h2 className="heading text-dg-secondary">
+                {_data.segment3.mission.title}
+              </h2>
+              {_data.segment3.mission.paragraphs.map((item, index) => (
                 <p key={index} className="paragraph mt-4">
                   {item.paragraph}
                 </p>
-            )
-            )}
+              ))}
             </div>
           </div>
         </section>
 
         {/* Values Section */}
         <section
-        id="values"
-        className="bg-white dark:bg-dg-primary-1700 flex flex-row items-center justify-center mt-16"
-      >
+          id="values"
+          className="bg-white dark:bg-dg-primary-1700 flex flex-row items-center justify-center mt-16"
+        >
           <div className="my-8 flex flex-col justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0">
-            <h1 className="heading text-dg-secondary">{_data.values.heading}</h1>
+            <h2 className="heading text-dg-secondary">{_data.values.heading}</h2>
             <div className="absolute justify-center md:flex hidden self-center">
-              <img src={valuesBG}/>
+              <img src={valuesBG} alt="Values background" />
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-16 w-full mt-8">
-              {_data.values.cards.map((item,index) => (
+              {_data.values.cards.map((item, index) => (
                 <CardValues
-                key={index}
-                image={item.iconUrl}
-                heading={item.title}
-                paragraph={item.paragraph}
-              />
-            ))}
+                  key={index}
+                  image={item.iconUrl}
+                  heading={item.title}
+                  paragraph={item.paragraph}
+                />
+              ))}
             </div>
           </div>
         </section>
 
         {/* Partners Section */}
         <section
-        id="partners"
-        className="bg-baby-blue dark:bg-dg-primary-1600 flex flex-col items-center justify-center mt-16"
-      >
+          id="partners"
+          className="bg-baby-blue dark:bg-dg-primary-1600 flex flex-col items-center justify-center mt-16"
+        >
           <div className="my-16 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
             <div className="w-full md:w-2/3">
-              <h1 className="text-center heading text-dg-secondary">
+              <h2 className="text-center heading text-dg-secondary">
                 {_data.partners.title}
-              </h1>
-              <p className="text-left paragraph mt-4">
-                {_data.partners.paragraph}
-              </p>
+              </h2>
+              <p className="text-left paragraph mt-4">{_data.partners.paragraph}</p>
             </div>
             <div className="flex flex-row justify-between items-center w-full mt-16">
-              {_data.partners.icons.map((item,index) => (
+              {_data.partners.icons.map((item, index) => (
                 <img
-                key={index}
-                src={item}
-                alt="Partner's image"
-                className="w-16 md:w-20 lg:w-24"
-              />
-            ))}
+                  key={index}
+                  src={item}
+                  alt="Partner's image"
+                  className="w-16 md:w-20 lg:w-24"
+                />
+              ))}
             </div>
           </div>
         </section>
 
         {/* Industries Section */}
         <section
-        id="industries"
-        className="bg-white dark:bg-dg-primary-1700 flex flex-col items-center justify-center mt-16"
-      >
+          id="industries"
+          className="bg-white dark:bg-dg-primary-1700 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">
-              <h1 className="heading text-dg-secondary">{_data.industries.title}</h1>
+              <h2 className="heading text-dg-secondary">{_data.industries.title}</h2>
             </div>
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-32 w-full mt-8">
-              {_data.industries.industries.map((industry,index) => (
+              {_data.industries.industries.map((industry, index) => (
                 <div key={index}>
-                  <h3 className="h3-heading">
-                    {industry.title}
-                  </h3>
-                  <p className="paragraph mt-2">
-                    {industry.paragraph}
-                  </p>
-                  <img
-            src={industry.imgUrl}
-            alt="Industries images"
-            className="m-auto"
-          />
+                  <h3 className="h3-heading">{industry.title}</h3>
+                  <p className="paragraph mt-2">{industry.paragraph}</p>
+                  <img src={industry.imgUrl} alt="Industries images" className="m-auto" />
                 </div>
-            ))}
+              ))}
             </div>
-          
           </div>
         </section>
 
         <Wrapper bg padding={' py-90p'}>
-          <PageTitle heading={_data.timeline.title} subheading={_data.timeline.subtitle} left />
+          <PageTitle
+            heading={_data.timeline.title}
+            subheading={_data.timeline.subtitle}
+            left
+          />
 
           <div className="my-90p">
             <div className="w-full relative ">
               <div className="md:absolute top-[5%] left-0 w-full h-full hidden md:block">
-                <TimelineLogo/>
+                <TimelineLogo />
               </div>
-          
+
               <TimelineCardsWrapper2>
                 {_data.timeline.cards.map((item, index) => (
                   <TimelineCard
-                key={index}
-                id={index}
-                title={item.title}
-                subtitle={item.subtitle}
-                paragraph={item.paragraph}
-              />
-            ))}
+                    key={index}
+                    id={index}
+                    title={item.title}
+                    subtitle={item.subtitle}
+                    paragraph={item.paragraph}
+                  />
+                ))}
               </TimelineCardsWrapper2>
             </div>
-     
           </div>
-          
         </Wrapper>
-
       </div>
     </PageLayout>
   );

frontend/src/pages/Careers.jsx

@@ -27,7 +27,8 @@ const _data = {
       {
         nugget: '.Net',
         role: '.Net Developer',
-        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.',
+        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.',
       },
     ],
   },
@@ -36,48 +37,52 @@ const _data = {
     subheading: 'Diligent life',
     italic: {
       heading: 'Life At diligent',
-      paragraph: 'From the start, you can expect to be challenged and supported. We provide a encouraged atmosphere with knowledgeable mentors to help you advance in your career.  To create an inspiring work life, we collaborate as a team both inside and outside of the office.',
+      paragraph:
+        'From the start, you can expect to be challenged and supported. We provide a encouraged atmosphere with knowledgeable mentors to help you advance in your career.  To create an inspiring work life, we collaborate as a team both inside and outside of the office.',
       heading2: 'What It Means to Work With Us',
     },
     cards: [
       {
         id: 1,
         title: 'Shape the Future',
-        paragraph: 'We collaborate with business leaders and entrepreneurs to disrupt and push their industries forward. From startup ideas to enterprise-level product & software development, we work together as a team to transform our clients’ ideas into reality.',
+        paragraph:
+          'We collaborate with business leaders and entrepreneurs to disrupt and push their industries forward. From startup ideas to enterprise-level product & software development, we work together as a team to transform our clients’ ideas into reality.',
       },
       {
         id: 2,
         title: 'Life-Long Learning',
-        paragraph: 'We believe that learning is a journey that never ends. With us, you will have the opportunity to continuously learn in an environment surrounded by other highly skilled professionals with decades of experience.  Also, there are several chances for you to develop through the use of various technologies, involvement in the product definition process, conference attendance, and more.',
+        paragraph:
+          'We believe that learning is a journey that never ends. With us, you will have the opportunity to continuously learn in an environment surrounded by other highly skilled professionals with decades of experience.  Also, there are several chances for you to develop through the use of various technologies, involvement in the product definition process, conference attendance, and more.',
       },
       {
         id: 3,
         title: 'A Unique Culture',
-        paragraph: 'Everyone talks about a work-life balance, we do it - for two reasons. Firstly, we believe in an environment of happy people. Secondly, even if you’re highly productive, the only way to maintain productivity long-term is by taking time for the things that make you happy.',
+        paragraph:
+          'Everyone talks about a work-life balance, we do it - for two reasons. Firstly, we believe in an environment of happy people. Secondly, even if you’re highly productive, the only way to maintain productivity long-term is by taking time for the things that make you happy.',
       },
       {
         id: 4,
         title: 'Make the Impossible Better',
-        paragraph: 'If you have a mindset that is continuously focused on pushing through and beyond your boundaries, conquering a whole new challenge every day in an atmosphere where you constantly learn and improve, this is the place for you. We\'d love to learn more about you.',
+        paragraph:
+          "If you have a mindset that is continuously focused on pushing through and beyond your boundaries, conquering a whole new challenge every day in an atmosphere where you constantly learn and improve, this is the place for you. We'd love to learn more about you.",
       },
     ],
   },
   connect: {
     heading: 'Connect and Grow With Us',
-    paragraph: 'At Diligent, we are passionately proud of our culture and feel that everyone, including those who are not yet on the team, should have the opportunity to experience it. Because of this, we participate in Open Doors. Our coworkers are actively involved in the local tech communities. We take satisfaction in giving back as well, assisting college students or seasoned professionals who want to start a career in IT.',
+    paragraph:
+      'At Diligent, we are passionately proud of our culture and feel that everyone, including those who are not yet on the team, should have the opportunity to experience it. Because of this, we participate in Open Doors. Our coworkers are actively involved in the local tech communities. We take satisfaction in giving back as well, assisting college students or seasoned professionals who want to start a career in IT.',
     subtitle: 'Check out how we have fun together!',
-    sliderImages: [
-
-    ],
+    sliderImages: [],
   },
   ActionCard: {
     heading: 'Contact Us and Step up Your Career!',
-    paragraph: 'We are continuously on the lookout for talented people to grow our business.',
-    paragraph2: 'Don\'t be shy - Apply!',
+    paragraph:
+      'We are continuously on the lookout for talented people to grow our business.',
+    paragraph2: "Don't be shy - Apply!",
     primaryBtn: 'Apply',
     secondaryBtn: 'About Us',
   },
-
 };
 
 export default function Careers({ forwardedRef }) {
@@ -85,7 +90,6 @@ export default function Careers({ forwardedRef }) {
   const [cntCareers, setCntCareers] = useState('');
   const [isLoaded, setIsLoaded] = useState('');
 
-
   const api_url = process.env.REACT_APP_API_URL;
 
   useEffect(() => {
@@ -125,14 +129,22 @@ export default function Careers({ forwardedRef }) {
     <PageLayout>
       <div className="bg-white dark:bg-dg-primary-1700 w-full pt-90p overflow-hidden">
         <Wrapper padding={' py-90p'}>
-          <PageTitle heading={_data.heading.heading} subheading={_data.heading.subheading} left color />
-
+          <h1 className="hidden">Careers - Join our Team</h1>
+          <PageTitle
+            heading={_data.heading.heading}
+            subheading={_data.heading.subheading}
+            left
+            color
+          />
         </Wrapper>
         <Wrapper padding={' py-90p'}>
           <div className="absolute hidden -ml-64 md:block">
             <OrbitOnScroll />
           </div>
-          <section id="jobs" className="flex items-center justify-center max-w-custom m-auto">
+          <section
+            id="jobs"
+            className="flex items-center justify-center max-w-custom m-auto"
+          >
             <div className="w-full">
               {/* {cntCareers.job.map(job => (
             <div key={job.id}>
@@ -157,17 +169,25 @@ export default function Careers({ forwardedRef }) {
           </section>
         </Wrapper>
         <Wrapper bg padding={' py-90p'}>
-          <PageTitle left heading={_data.life.heading} subheading={_data.life.subheading} />
+          <PageTitle
+            left
+            heading={_data.life.heading}
+            subheading={_data.life.subheading}
+          />
 
           <div className="my-90p">
             <div className="my-90p">
               <h3 className="title-italic">{_data.life.italic.heading}</h3>
-              <p className="paragraph">
-                {_data.life.italic.paragraph}
-              </p>
-              <div className='w-full py-90p'>
-              <iframe className='m-auto w-[300px] h-[180px] md:w-[500px] md:h-[400px] lg:w-[800px] lg:h-[560px]' src="https://www.youtube.com/embed/PFHIqqHRS4s?controls=0" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
-
+              <p className="paragraph">{_data.life.italic.paragraph}</p>
+              <div className="w-full py-90p">
+                <iframe
+                  className="m-auto w-[300px] h-[180px] md:w-[500px] md:h-[400px] lg:w-[800px] lg:h-[560px]"
+                  src="https://www.youtube.com/embed/PFHIqqHRS4s?controls=0"
+                  title="YouTube video player"
+                  frameBorder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allowFullScreen
+                ></iframe>
               </div>
             </div>
             <h3 className="title-italic">{_data.life.italic.heading2}</h3>
@@ -191,13 +211,11 @@ export default function Careers({ forwardedRef }) {
                 </div>
               </div>
             </section>
-
           </div>
         </Wrapper>
         <Wrapper padding={' py-90p'}>
           <PageTitle heading={_data.connect.heading} color />
           <p className="paragraph my-32p">{_data.connect.paragraph}</p>
-
         </Wrapper>
         <Wrapper>
           <section id="highlight" className="flex flex-col items-center justify-center">
@@ -209,13 +227,18 @@ export default function Careers({ forwardedRef }) {
         </Wrapper>
         <Wrapper>
           <div className="my-90p">
-            <ActionCard title={_data.ActionCard.heading} text={_data.ActionCard.paragraph} btn1={_data.ActionCard.primaryBtn} btn2={_data.ActionCard.secondaryBtn} link1={'/contact'} link2={'/about'} text2={_data.ActionCard.paragraph2} />
+            <ActionCard
+              title={_data.ActionCard.heading}
+              text={_data.ActionCard.paragraph}
+              btn1={_data.ActionCard.primaryBtn}
+              btn2={_data.ActionCard.secondaryBtn}
+              link1={'/contact'}
+              link2={'/about'}
+              text2={_data.ActionCard.paragraph2}
+            />
           </div>
         </Wrapper>
-
       </div>
     </PageLayout>
-
-
   );
 }

frontend/src/pages/CaseStudyBI.jsx

@@ -9,25 +9,25 @@ import dataFactory from './../assets/icons/caseStudy/data-factory.svg';
 import { useEffect } from 'react';
 import Wrapper from '../layout/Wrapper';
 import TechNuggets from '../components/shared/TechNuggets';
-import {motion} from 'framer-motion';
+import { motion } from 'framer-motion';
 
 const numbers = [
   {
     value: 7,
     static: '+',
-    title: 'Team Members'
+    title: 'Team Members',
   },
   {
     value: 100,
     static: '+',
-    title: 'Users'
+    title: 'Users',
   },
   {
     value: 100,
     static: '+',
-    title: 'Transactions per Year'
-  }
-]
+    title: 'Transactions per Year',
+  },
+];
 
 const _data = {
   heading: {
@@ -116,153 +116,150 @@ const _data = {
 };
 
 export default function CaseStudyBI() {
-
   useEffect(() => {
     document.title = 'Case Study: BI Healthcare Solution';
-  },[]);
+  }, []);
 
   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://lh3.googleusercontent.com/QkLcHNOGmWIB2t3fwZd69ZwJpHOYcTTAPmPs4zbjErDbp9nXbTw0vhktPCuCM2EWZUU=w2400')] 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">{_data.heading.subheading}</h6>
-            <h1 className="heading text-dg-secondary mt-2">{_data.heading.heading}</h1>
-            <p className="paragraph mt-4">{_data.heading.paragraph}</p>
-          </div>
-        </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' }}
+      <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://lh3.googleusercontent.com/QkLcHNOGmWIB2t3fwZd69ZwJpHOYcTTAPmPs4zbjErDbp9nXbTw0vhktPCuCM2EWZUU=w2400')] bg-cover"
         >
-          {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 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">{_data.heading.subheading}</h6>
+              <h1 className="heading text-dg-secondary mt-2">{_data.heading.heading}</h1>
+              <p className="paragraph mt-4">{_data.heading.paragraph}</p>
             </div>
-          ))}
-        </motion.section>
-      </Wrapper>
-
-      {/* About the Client Section */}
-      <section id="client" className="flex flex-col items-center justify-center">
-        <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">{_data.about.heading}</h3>
-            <p className="paragraph mt-4">{_data.about.paragraph}</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">
-                {_data.about.country_heading}
-              </h5>
-              <p className="mt-4">{_data.about.country_name}</p>
+        </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>
+
+        {/* About the Client Section */}
+        <section id="client" className="flex flex-col items-center justify-center">
+          <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">{_data.about.heading}</h3>
+              <p className="paragraph mt-4">{_data.about.paragraph}</p>
             </div>
-            <div className="float-left md:float-right text-left md:text-right">
-              <h5 className="text-teal-600 font-semibold">
-                {_data.about.industry_heading}
-              </h5>
-              <p className="mt-4">{_data.about.industry_name}</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">
+                <h4 className="text-teal-600 font-semibold">
+                  {_data.about.country_heading}
+                </h4>
+                <p className="mt-4">{_data.about.country_name}</p>
+              </div>
+              <div className="float-left md:float-right text-left md:text-right">
+                <h4 className="text-teal-600 font-semibold">
+                  {_data.about.industry_heading}
+                </h4>
+                <p className="mt-4">{_data.about.industry_name}</p>
+              </div>
             </div>
           </div>
-        </div>
-      </section>
+        </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">{_data.domain.heading}</h3>
-            <p className="paragraph mt-4">{_data.domain.paragraph}</p>
+        {/* 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">{_data.domain.heading}</h3>
+              <p className="paragraph mt-4">{_data.domain.paragraph}</p>
+            </div>
           </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">{_data.challanges.heading}</h3>
-              <p className="text-sm text-dark-gray dark:text-white mt-4">
-                {_data.challanges.paragraph}
-              </p>
-            </div>
-            <div className="mt-8">
-              <h3 className="h3-heading">{_data.solution.heading}</h3>
-              <p className="text-sm text-dark-gray dark:text-white mt-4">
-                {_data.solution.paragraph}
-              </p>
+        {/* 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">{_data.challanges.heading}</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  {_data.challanges.paragraph}
+                </p>
+              </div>
+              <div className="mt-8">
+                <h3 className="h3-heading">{_data.solution.heading}</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  {_data.solution.paragraph}
+                </p>
+              </div>
             </div>
+            <img
+              src={_data.solution.imgUrl}
+              alt="Case Study main image"
+              className="text-center w-full md:w-1/2"
+            />
           </div>
-          <img
-            src={_data.solution.imgUrl}
-            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">{_data.results.heading}</h3>
-            <ul className="list-disc paragraph mt-2 pl-8">
-              {_data.results.list.map(item => (
-                <li key={item.id}>{item.text}</li>
-              ))}
-            </ul>
+        {/* 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">{_data.results.heading}</h3>
+              <ul className="list-disc paragraph mt-2 pl-8">
+                {_data.results.list.map(item => (
+                  <li key={item.id}>{item.text}</li>
+                ))}
+              </ul>
+            </div>
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* Technologies Section */}
-      <section
-        id="technologies"
-        className="flex flex-col justify-center mt-16"
-      >
-        <div className="my-8 flex flex-col justify-center w-full max-w-custom m-auto px-8 xl:px-0">
-          <div className="w-full">
-            <h3 className="h3-heading">Technologies</h3>
+        {/* Technologies Section */}
+        <section id="technologies" className="flex flex-col justify-center mt-16">
+          <div className="my-8 flex flex-col justify-center 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', 'Power BI', 'Power Automate', 'MSSQL', 'Data Factory']}
+            />
           </div>
-          <TechNuggets tech={['.Net','Power BI','Power Automate','MSSQL','Data Factory']}/>
-        </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/CaseStudyCentralized.jsx

@@ -8,7 +8,7 @@ import mssql from './../assets/icons/caseStudy/MSSQL.svg';
 import dataFactory from './../assets/icons/caseStudy/data-factory.svg';
 import { useEffect } from 'react';
 import Wrapper from '../layout/Wrapper';
-import {motion} from 'framer-motion';
+import { motion } from 'framer-motion';
 import TechNuggets from '../components/shared/TechNuggets';
 
 const numbers = [
@@ -35,8 +35,7 @@ const _data = {
     heading: 'Centralized Monitoring System',
     imgUrl:
       'https://lh4.googleusercontent.com/P93dPcW2bzA11uz2IhXYmSfEUQRzXjmeIH0HXv88s-dUmHQdtPtNonxeR-h0wqoPeMU=w2400',
-    paragraph:
-      'Development of a centralized monitoring system for healthcare tools',
+    paragraph: 'Development of a centralized monitoring system for healthcare tools',
   },
 
   about: {
@@ -58,7 +57,7 @@ const _data = {
   challanges: {
     heading: 'Challanges',
     paragraph:
-      'Some of them didn\'t even have open API-s, some of them required an extra set of rules, and some of them were still in development. This made integration difficult and time-consuming. However, we were eventually able to overcome these challenges and provide our users with a seamless experience.',
+      "Some of them didn't even have open API-s, some of them required an extra set of rules, and some of them were still in development. This made integration difficult and time-consuming. However, we were eventually able to overcome these challenges and provide our users with a seamless experience.",
   },
 
   solution: {
@@ -120,19 +119,20 @@ const _data = {
 };
 
 export default function CaseStudyCentralized() {
-
   useEffect(() => {
     document.title = 'Case Study: Centralized Monitoring System';
-  },[]);
+  }, []);
 
   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 relative bg-cover bg-[url(\'https://lh4.googleusercontent.com/P93dPcW2bzA11uz2IhXYmSfEUQRzXjmeIH0HXv88s-dUmHQdtPtNonxeR-h0wqoPeMU=w2400\')] bg-no-repeat'}
-      >
+          id="heading"
+          className={
+            "flex flex-col items-center justify-center m-auto py-16 md:py-32 relative bg-cover bg-[url('https://lh4.googleusercontent.com/P93dPcW2bzA11uz2IhXYmSfEUQRzXjmeIH0HXv88s-dUmHQdtPtNonxeR-h0wqoPeMU=w2400')] bg-no-repeat"
+          }
+        >
           <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">{_data.heading.subheading}</h6>
@@ -167,21 +167,21 @@ export default function CaseStudyCentralized() {
         <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">{_data.about.heading}</h3>
+              <h2 className="h3-heading text-teal-600">{_data.about.heading}</h2>
               <p className="paragraph mt-4">{_data.about.paragraph}</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">
+                <h3 className="text-teal-600 font-semibold">
                   {_data.about.country_heading}
-                </h5>
+                </h3>
                 <p className="mt-4">{_data.about.country_name}</p>
               </div>
               <div className="float-left md:float-right text-left md:text-right">
-                <h5 className="text-teal-600 font-semibold">
+                <h3 className="text-teal-600 font-semibold">
                   {_data.about.industry_heading}
-                </h5>
+                </h3>
                 <p className="mt-4">{_data.about.industry_name}</p>
               </div>
             </div>
@@ -200,9 +200,9 @@ export default function CaseStudyCentralized() {
 
         {/* Challanges, Solution Section */}
         <section
-        id="challanges_solution"
-        className="flex flex-col items-center justify-center mt-16"
-      >
+          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>
@@ -219,10 +219,10 @@ export default function CaseStudyCentralized() {
               </div>
             </div>
             <img
-            src={_data.solution.imgUrl}
-            alt="Case Study main image"
-            className="text-center w-full md:w-1/2"
-          />
+              src={_data.solution.imgUrl}
+              alt="Case Study main image"
+              className="text-center w-full md:w-1/2"
+            />
           </div>
         </section>
 
@@ -234,22 +234,19 @@ export default function CaseStudyCentralized() {
               <ul className="list-disc paragraph mt-2 pl-8">
                 {_data.results.list.map(item => (
                   <li key={item.id}>{item.text}</li>
-              ))}
+                ))}
               </ul>
             </div>
           </div>
         </section>
 
         {/* Technologies Section */}
-        <section
-        id="technologies"
-        className="flex flex-col items-center  mt-16"
-      >
+        <section id="technologies" className="flex flex-col items-center  mt-16">
           <div className="my-8 flex flex-col 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>
-            <TechNuggets tech={['.Net']}/>
+            <TechNuggets tech={['.Net']} />
           </div>
         </section>
 
@@ -257,13 +254,13 @@ export default function CaseStudyCentralized() {
         <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'}
-          />
+              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>

frontend/src/pages/CaseStudyFinantial.jsx

@@ -5,26 +5,26 @@ import net from './../assets/icons/caseStudy/net.svg';
 import angular from './../assets/icons/caseStudy/angular.svg';
 import mssql from './../assets/icons/caseStudy/MSSQL.svg';
 import { useEffect } from 'react';
-import {motion} from 'framer-motion';
+import { motion } from 'framer-motion';
 import Wrapper from '../layout/Wrapper';
 import TechNuggets from '../components/shared/TechNuggets';
 const numbers = [
   {
     value: 5,
     static: '+',
-    title: 'Team Members'
+    title: 'Team Members',
   },
   {
     value: 3,
     static: '+',
-    title: 'Years Project Duration'
+    title: 'Years Project Duration',
   },
   {
     value: '1,6m',
     static: '+',
-    title: 'Transactions per Year'
-  }
-]
+    title: 'Transactions per Year',
+  },
+];
 
 const _data = {
   heading: {
@@ -32,13 +32,13 @@ const _data = {
     heading: 'Financial Engine',
     imgUrl:
       'https://lh3.googleusercontent.com/pCtBoMQ4ea-MJV9TJzWucWkMOo0_0fetGCXblvffooAn9bG_ARbWNScRBBO16dNNrnk=w2400',
-    paragraph:
-      'Implementing a system for financial system management',
+    paragraph: 'Implementing a system for financial system management',
   },
 
   about: {
     heading: 'About the Client',
-    paragraph: 'The client that deals with precious metals trading, storing, and investment had us expand the existing IT system with a sub-system that monitors and analyze the financial perspective of the business.',
+    paragraph:
+      'The client that deals with precious metals trading, storing, and investment had us expand the existing IT system with a sub-system that monitors and analyze the financial perspective of the business.',
     country_heading: 'Country',
     country_name: 'USA',
     industry_heading: 'Industry',
@@ -108,153 +108,151 @@ const _data = {
 };
 
 export default function CaseStudyFinantial() {
-
   useEffect(() => {
     document.title = 'Case Study: Financial Engine';
-  },[]);
+  }, []);
 
   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://lh3.googleusercontent.com/pCtBoMQ4ea-MJV9TJzWucWkMOo0_0fetGCXblvffooAn9bG_ARbWNScRBBO16dNNrnk=w2400')] 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">{_data.heading.subheading}</h6>
-            <h1 className="heading text-dg-secondary mt-2">{_data.heading.heading}</h1>
-            <p className="paragraph mt-4">{_data.heading.paragraph}</p>
-          </div>
-        </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' }}
+      <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://lh3.googleusercontent.com/pCtBoMQ4ea-MJV9TJzWucWkMOo0_0fetGCXblvffooAn9bG_ARbWNScRBBO16dNNrnk=w2400')] bg-cover"
         >
-          {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 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">{_data.heading.subheading}</h6>
+              <h1 className="heading text-dg-secondary mt-2">{_data.heading.heading}</h1>
+              <p className="paragraph mt-4">{_data.heading.paragraph}</p>
             </div>
-          ))}
-        </motion.section>
-      </Wrapper>
-
-      {/* About the Client Section */}
-      <section id="client" className="flex flex-col items-center justify-center">
-        <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">{_data.about.heading}</h3>
-            <p className="paragraph mt-4">{_data.about.paragraph}</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">
-                {_data.about.country_heading}
-              </h5>
-              <p className="mt-4">{_data.about.country_name}</p>
+        </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>
+
+        {/* About the Client Section */}
+        <section id="client" className="flex flex-col items-center justify-center">
+          <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">{_data.about.heading}</h3>
+              <p className="paragraph mt-4">{_data.about.paragraph}</p>
             </div>
-            <div className="float-left md:float-right text-left md:text-right">
-              <h5 className="text-teal-600 font-semibold">
-                {_data.about.industry_heading}
-              </h5>
-              <p className="mt-4">{_data.about.industry_name}</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">
+                <h4 className="text-teal-600 font-semibold">
+                  {_data.about.country_heading}
+                </h4>
+                <p className="mt-4">{_data.about.country_name}</p>
+              </div>
+              <div className="float-left md:float-right text-left md:text-right">
+                <h4 className="text-teal-600 font-semibold">
+                  {_data.about.industry_heading}
+                </h4>
+                <p className="mt-4">{_data.about.industry_name}</p>
+              </div>
             </div>
           </div>
-        </div>
-      </section>
+        </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">{_data.domain.heading}</h3>
-            <p className="paragraph mt-4">{_data.domain.paragraph}</p>
+        {/* 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">{_data.domain.heading}</h3>
+              <p className="paragraph mt-4">{_data.domain.paragraph}</p>
+            </div>
           </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">{_data.challanges.heading}</h3>
-              <p className="text-sm text-dark-gray dark:text-white mt-4">
-                {_data.challanges.paragraph}
-              </p>
-            </div>
-            <div className="mt-8">
-              <h3 className="h3-heading">{_data.solution.heading}</h3>
-              <p className="text-sm text-dark-gray dark:text-white mt-4">
-                {_data.solution.paragraph}
-              </p>
+        {/* 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">{_data.challanges.heading}</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  {_data.challanges.paragraph}
+                </p>
+              </div>
+              <div className="mt-8">
+                <h3 className="h3-heading">{_data.solution.heading}</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  {_data.solution.paragraph}
+                </p>
+              </div>
             </div>
+            <img
+              src={_data.solution.imgUrl}
+              alt="Case Study main image"
+              className="text-center w-full md:w-1/2"
+            />
           </div>
-          <img
-            src={_data.solution.imgUrl}
-            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">{_data.results.heading}</h3>
-            <ul className="list-disc paragraph mt-2 pl-8">
-              {_data.results.list.map(item => (
-                <li key={item.id}>{item.text}</li>
-              ))}
-            </ul>
+        {/* 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">{_data.results.heading}</h3>
+              <ul className="list-disc paragraph mt-2 pl-8">
+                {_data.results.list.map(item => (
+                  <li key={item.id}>{item.text}</li>
+                ))}
+              </ul>
+            </div>
           </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>
+        {/* 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>
+            <TechNuggets tech={['.Net', 'Angular', 'MSSQL']} />
           </div>
-          <TechNuggets tech={['.Net','Angular','MSSQL']}/>
-        </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/CaseStudyResource.jsx

@@ -7,21 +7,21 @@ import powerAutomate from './../assets/icons/caseStudy/power-automate.svg';
 import mssql from './../assets/icons/caseStudy/MSSQL.svg';
 import dataFactory from './../assets/icons/caseStudy/data-factory.svg';
 import { useEffect } from 'react';
-import {motion} from 'framer-motion';
+import { motion } from 'framer-motion';
 import Wrapper from '../layout/Wrapper';
 
 const numbers = [
   {
     value: 6,
     static: '+',
-    title: 'Team Members'
+    title: 'Team Members',
   },
   {
     value: 6,
     static: '+',
-    title: 'Months Project duration'
+    title: 'Months Project duration',
   },
-]
+];
 
 const _data = {
   heading: {
@@ -113,158 +113,160 @@ const _data = {
 };
 
 export default function CaseStudyResource() {
-
   useEffect(() => {
     document.title = 'Case Study: Resource Planning System';
-  },[]);
+  }, []);
 
   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://lh3.googleusercontent.com/b9F35_JPlulVv0jS3UAYKJ2z6gz_AsWprQef_1wWTFGJlhEyLGfA1AthyUcdgrm1Qdk=w2400')] 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">{_data.heading.subheading}</h6>
-            <h1 className="heading text-dg-secondary mt-2">{_data.heading.heading}</h1>
-            <p className="paragraph mt-4">{_data.heading.paragraph}</p>
-          </div>
-        </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' }}
+      <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://lh3.googleusercontent.com/b9F35_JPlulVv0jS3UAYKJ2z6gz_AsWprQef_1wWTFGJlhEyLGfA1AthyUcdgrm1Qdk=w2400')] bg-cover"
         >
-          {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 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">{_data.heading.subheading}</h6>
+              <h1 className="heading text-dg-secondary mt-2">{_data.heading.heading}</h1>
+              <p className="paragraph mt-4">{_data.heading.paragraph}</p>
             </div>
-          ))}
-        </motion.section>
-      </Wrapper>
-
-      {/* About the Client Section */}
-      <section id="client" className="flex flex-col items-center justify-center">
-        <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">{_data.about.heading}</h3>
-            <p className="paragraph mt-4">{_data.about.paragraph}</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">{_data.about.country_heading}</h5>
-              <p className="mt-4">{_data.about.country_name}</p>
+        </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>
+
+        {/* About the Client Section */}
+        <section id="client" className="flex flex-col items-center justify-center">
+          <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">{_data.about.heading}</h3>
+              <p className="paragraph mt-4">{_data.about.paragraph}</p>
             </div>
-            <div className="float-left md:float-right text-left md:text-right">
-              <h5 className="text-teal-600 font-semibold">{_data.about.industry_heading}</h5>
-              <p className="mt-4">{_data.about.industry_name}</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">
+                <h4 className="text-teal-600 font-semibold">
+                  {_data.about.country_heading}
+                </h4>
+                <p className="mt-4">{_data.about.country_name}</p>
+              </div>
+              <div className="float-left md:float-right text-left md:text-right">
+                <h4 className="text-teal-600 font-semibold">
+                  {_data.about.industry_heading}
+                </h4>
+                <p className="mt-4">{_data.about.industry_name}</p>
+              </div>
             </div>
           </div>
-        </div>
-      </section>
+        </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">{_data.domain.heading}</h3>
-            <p className="paragraph mt-4">{_data.domain.paragraph}</p>
+        {/* 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">{_data.domain.heading}</h3>
+              <p className="paragraph mt-4">{_data.domain.paragraph}</p>
+            </div>
           </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">{_data.challanges.heading}</h3>
-              <p className="text-sm text-dark-gray dark:text-white mt-4">
-                {_data.challanges.paragraph}
-              </p>
+        {/* 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">{_data.challanges.heading}</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  {_data.challanges.paragraph}
+                </p>
+              </div>
+              <div className="mt-8">
+                <h3 className="h3-heading">{_data.solution.heading}</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  {_data.solution.paragraph}
+                </p>
+              </div>
             </div>
-            <div className="mt-8">
-              <h3 className="h3-heading">{_data.solution.heading}</h3>
-              <p className="text-sm text-dark-gray dark:text-white mt-4">
-                {_data.solution.paragraph}
-              </p>
+            <img
+              src={_data.solution.imgUrl}
+              alt="Case Study main image"
+              className="text-center w-full md:w-1/2"
+            />
+          </div>
+        </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">{_data.results.heading}</h3>
+              <ul className="list-disc paragraph mt-2 pl-8">
+                {_data.results.list.map(item => (
+                  <li key={item.id}>{item.text}</li>
+                ))}
+              </ul>
             </div>
           </div>
-          <img
-            src={_data.solution.imgUrl}
-            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">{_data.results.heading}</h3>
-            <ul className="list-disc paragraph mt-2 pl-8">
-              {_data.results.list.map(item => (
-                <li key={item.id}>{item.text}</li>
+        {/* 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">
+              {_data.technologies.map(technology => (
+                <img
+                  key={technology.id}
+                  src={technology.link}
+                  alt="Technology's image"
+                  className="w-12 md:w-16 lg:w-20"
+                />
               ))}
-            </ul>
+            </div>
           </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>
-          </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">
-            {_data.technologies.map(technology => (
-              <img
-                key={technology.id}
-                src={technology.link}
-                alt="Technology's image"
-                className="w-12 md:w-16 lg:w-20"
-              />
-            ))}
+        {/* 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>
-        </div>
-      </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>
+        </section>
+      </div>
     </PageLayout>
   );
 }

frontend/src/pages/CaseStudyStrata.jsx

@@ -8,34 +8,33 @@ import jquery from './../assets/icons/caseStudy/jquery.svg';
 import react from './../assets/icons/caseStudy/react-native.svg';
 import mssql from './../assets/icons/caseStudy/MSSQL.svg';
 import { useEffect } from 'react';
-import {motion} from 'framer-motion';
+import { motion } from 'framer-motion';
 import Wrapper from '../layout/Wrapper';
 
 const numbers = [
   {
     value: 5,
     static: '+',
-    title: 'Team Members'
+    title: 'Team Members',
   },
   {
     value: '3',
     static: '+',
-    title: 'Years Project duration'
+    title: 'Years Project duration',
   },
   {
     value: '1,6m',
     static: '+',
-    title: 'Transactions per Year'
-  }
-]
+    title: 'Transactions per Year',
+  },
+];
 
 const _data = {
   heading: {
     subheading: 'Case Study',
     heading: 'Health Tracking Software',
     imgUrl: strata,
-    paragraph:
-      'COVID and Health Tracking Business Software',
+    paragraph: 'COVID and Health Tracking Business Software',
   },
 
   about: {
@@ -64,8 +63,7 @@ const _data = {
     heading: 'Solution',
     paragraph:
       'To fulfill all requirements, we made a flexible application that consists of 3 parts: Admin portal, User portal, and User mobile app.',
-    imgUrl:
-      'https://i.postimg.cc/L43QFftg/Strata-Small.png',
+    imgUrl: 'https://i.postimg.cc/L43QFftg/Strata-Small.png',
   },
 
   results: {
@@ -113,25 +111,27 @@ const _data = {
 export default function CaseStudyStrata() {
   useEffect(() => {
     document.title = 'Case Study: Healthcare Tracking Software';
-  },[]);
+  }, []);
   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 relative bg-cover bg-[url('https://i.postimg.cc/ZK08syVS/Strata.jpg')] bg-no-repeat"}
-      >
-        <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">{_data.heading.subheading}</h6>
-            <h1 className="heading text-dg-secondary mt-2">{_data.heading.heading}</h1>
-            <p className="paragraph mt-4">{_data.heading.paragraph}</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 relative bg-cover bg-[url('https://i.postimg.cc/ZK08syVS/Strata.jpg')] bg-no-repeat"
+          }
+        >
+          <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">{_data.heading.subheading}</h6>
+              <h1 className="heading text-dg-secondary mt-2">{_data.heading.heading}</h1>
+              <p className="paragraph mt-4">{_data.heading.paragraph}</p>
+            </div>
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* <Wrapper  padding={' py-90p'}>
+        {/* <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"
@@ -152,119 +152,119 @@ export default function CaseStudyStrata() {
         </motion.section>
       </Wrapper> */}
 
-      {/* 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">{_data.about.heading}</h3>
-            <p className="paragraph mt-4">{_data.about.paragraph}</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">
-                {_data.about.country_heading}
-              </h5>
-              <p className="mt-4">{_data.about.country_name}</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">
+              <h2 className="h3-heading text-teal-600">{_data.about.heading}</h2>
+              <p className="paragraph mt-4">{_data.about.paragraph}</p>
             </div>
-            <div className="float-left md:float-right text-left md:text-right">
-              <h5 className="text-teal-600 font-semibold">
-                {_data.about.industry_heading}
-              </h5>
-              <p className="mt-4">{_data.about.industry_name}</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">
+                <h3 className="text-teal-600 font-semibold">
+                  {_data.about.country_heading}
+                </h3>
+                <p className="mt-4">{_data.about.country_name}</p>
+              </div>
+              <div className="float-left md:float-right text-left md:text-right">
+                <h3 className="text-teal-600 font-semibold">
+                  {_data.about.industry_heading}
+                </h3>
+                <p className="mt-4">{_data.about.industry_name}</p>
+              </div>
             </div>
           </div>
-        </div>
-      </section>
+        </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">{_data.domain.heading}</h3>
-            <p className="paragraph mt-4">{_data.domain.paragraph}</p>
+        {/* 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">{_data.domain.heading}</h3>
+              <p className="paragraph mt-4">{_data.domain.paragraph}</p>
+            </div>
           </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">{_data.challanges.heading}</h3>
-              <p className="text-sm text-dark-gray dark:text-white mt-4">
-                {_data.challanges.paragraph}
-              </p>
+        {/* 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">{_data.challanges.heading}</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  {_data.challanges.paragraph}
+                </p>
+              </div>
+              <div className="mt-8">
+                <h3 className="h3-heading">{_data.solution.heading}</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  {_data.solution.paragraph}
+                </p>
+              </div>
             </div>
-            <div className="mt-8">
-              <h3 className="h3-heading">{_data.solution.heading}</h3>
-              <p className="text-sm text-dark-gray dark:text-white mt-4">
-                {_data.solution.paragraph}
-              </p>
+            <img
+              src={_data.solution.imgUrl}
+              alt="Case Study main image"
+              className="text-center w-full md:w-1/2"
+            />
+          </div>
+        </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">{_data.results.heading}</h3>
+              <ul className="list-disc paragraph mt-2 pl-8">
+                {_data.results.list.map(item => (
+                  <li key={item.id}>{item.text}</li>
+                ))}
+              </ul>
             </div>
           </div>
-          <img
-            src={_data.solution.imgUrl}
-            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">{_data.results.heading}</h3>
-            <ul className="list-disc paragraph mt-2 pl-8">
-              {_data.results.list.map(item => (
-                <li key={item.id}>{item.text}</li>
+        {/* 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">
+              {_data.technologies.map(technology => (
+                <img
+                  key={technology.id}
+                  src={technology.link}
+                  alt="Technology's image"
+                  className="w-12 md:w-16 lg:w-20"
+                />
               ))}
-            </ul>
+            </div>
           </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>
-          </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">
-            {_data.technologies.map(technology => (
-              <img
-                key={technology.id}
-                src={technology.link}
-                alt="Technology's image"
-                className="w-12 md:w-16 lg:w-20"
-              />
-            ))}
+        {/* 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>
-        </div>
-      </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>
+        </section>
+      </div>
     </PageLayout>
   );
 }

frontend/src/pages/CaseStudyTicketing.jsx

@@ -8,25 +8,25 @@ import mssql from './../assets/icons/caseStudy/MSSQL.svg';
 import raspberry from './../assets/icons/caseStudy/raspberrypi.svg';
 import ionic from './../assets/icons/caseStudy/ionic.svg';
 import { useEffect } from 'react';
-import {motion} from 'framer-motion';
+import { motion } from 'framer-motion';
 import TechNuggets from '../components/shared/TechNuggets';
 const numbers = [
   {
     value: 10,
     static: '+',
-    title: 'Projects'
+    title: 'Projects',
   },
   {
     value: 10,
     static: '+',
-    title: 'Years Project Duration'
+    title: 'Years Project Duration',
   },
   {
     value: '1,5m',
     static: '+',
-    title: 'Transactions per Year'
-  }
-]
+    title: 'Transactions per Year',
+  },
+];
 
 const _data = {
   heading: {
@@ -122,154 +122,153 @@ const _data = {
 };
 
 export default function CaseStudyTicketing() {
-
   useEffect(() => {
     document.title = 'Case Study: Ticketing System For Passengers';
-  },[]);
-
+  }, []);
 
   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://lh6.googleusercontent.com/iYNVVAYNEmKe9mY9IFK39EUWT2GZLjnZjF0QoghP8HV1_q8arGWEryvCcPhOWRzRTwU=w2400')] 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">{_data.heading.subheading}</h6>
-            <h1 className="heading text-dg-secondary mt-2">{_data.heading.heading}</h1>
-            <p className="paragraph mt-4">{_data.heading.paragraph}</p>
-          </div>
-        </div>
-      </section>
-
-      <Wrapper  padding={' py-90p'}>
-      <motion.section
-          id="status-numbers"
-          className="flex flex-col md:flex-row items-center justify-between w-full gap-90p px-90p"
-          initial={{ y: 60, opacity: 0 }}
-          whileInView={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.5, ease: 'easeOut' }}
+      <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://lh6.googleusercontent.com/iYNVVAYNEmKe9mY9IFK39EUWT2GZLjnZjF0QoghP8HV1_q8arGWEryvCcPhOWRzRTwU=w2400')] bg-cover"
         >
-          {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 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">{_data.heading.subheading}</h6>
+              <h1 className="heading text-dg-secondary mt-2">{_data.heading.heading}</h1>
+              <p className="paragraph mt-4">{_data.heading.paragraph}</p>
             </div>
-          ))}
-        </motion.section>
-      </Wrapper>
-
-      {/* About the Client Section */}
-      <section id="client" className="flex flex-col items-start justify-center">
-        <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">{_data.about.heading}</h3>
-            <p className="paragraph mt-4">{_data.about.paragraph}</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">
-                {_data.about.country_heading}
-              </h5>
-              <p className="mt-4">{_data.about.country_name}</p>
+        </section>
+
+        <Wrapper padding={' py-90p'}>
+          <motion.section
+            id="status-numbers"
+            className="flex flex-col md:flex-row items-center 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-start justify-center">
+          <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">{_data.about.heading}</h3>
+              <p className="paragraph mt-4">{_data.about.paragraph}</p>
             </div>
-            <div className="float-left md:float-right text-left md:text-right">
-              <h5 className="text-teal-600 font-semibold">
-                {_data.about.industry_heading}
-              </h5>
-              <p className="mt-4">{_data.about.industry_name}</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">
+                <h4 className="text-teal-600 font-semibold">
+                  {_data.about.country_heading}
+                </h4>
+                <p className="mt-4">{_data.about.country_name}</p>
+              </div>
+              <div className="float-left md:float-right text-left md:text-right">
+                <h4 className="text-teal-600 font-semibold">
+                  {_data.about.industry_heading}
+                </h4>
+                <p className="mt-4">{_data.about.industry_name}</p>
+              </div>
             </div>
           </div>
-        </div>
-      </section>
+        </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">{_data.domain.heading}</h3>
-            <p className="paragraph mt-4">{_data.domain.paragraph}</p>
+        {/* 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">{_data.domain.heading}</h3>
+              <p className="paragraph mt-4">{_data.domain.paragraph}</p>
+            </div>
           </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">{_data.challanges.heading}</h3>
-              <p className="text-sm text-dark-gray dark:text-white mt-4">
-                {_data.challanges.paragraph}
-              </p>
-            </div>
-            <div className="mt-8">
-              <h3 className="h3-heading">{_data.solution.heading}</h3>
-              <p className="text-sm text-dark-gray dark:text-white mt-4">
-                {_data.solution.paragraph}
-              </p>
+        {/* 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">{_data.challanges.heading}</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  {_data.challanges.paragraph}
+                </p>
+              </div>
+              <div className="mt-8">
+                <h3 className="h3-heading">{_data.solution.heading}</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  {_data.solution.paragraph}
+                </p>
+              </div>
             </div>
+            <img
+              src={_data.solution.imgUrl}
+              alt="Case Study main image"
+              className="text-center w-full md:w-1/2"
+            />
           </div>
-          <img
-            src={_data.solution.imgUrl}
-            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">{_data.results.heading}</h3>
-            <ul className="list-disc paragraph mt-2 pl-8">
-              {_data.results.list.map(item => (
-                <li key={item.id}>{item.text}</li>
-              ))}
-            </ul>
+        {/* 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">{_data.results.heading}</h3>
+              <ul className="list-disc paragraph mt-2 pl-8">
+                {_data.results.list.map(item => (
+                  <li key={item.id}>{item.text}</li>
+                ))}
+              </ul>
+            </div>
           </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>
+        {/* 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>
+            <TechNuggets
+              tech={['.Net', 'Angular', 'Java', 'MSSQL', 'Ionic', 'Raspberry PI']}
+            />
           </div>
-         <TechNuggets tech={['.Net','Angular','Java','MSSQL','Ionic','Raspberry PI']}/>
-        </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/ContactPage.jsx

@@ -5,31 +5,26 @@ import Layout from '../layout/PageLayout';
 import axios from 'axios';
 import useDataApi from '../hooks/useDataApi';
 
-
-
 function ContactPage() {
   const [data, setData] = useState('');
   const [isLoaded, setIsLoaded] = useState('');
 
-  //const hookdata = useDataApi(`${api_url}/api/job-submissions`); 
-
+  //const hookdata = useDataApi(`${api_url}/api/job-submissions`);
 
   useEffect(() => {
     document.title = 'Contact Us';
-  },[]);
+  }, []);
 
   // useEffect(() => {
   //   console.log(hookdata);
   // })
   return (
     <PageLayout>
-      <section
-        id="contact"
-        className="h-fit bg-baby-blue dark:bg-dg-primary-1600 mt-90p"
-      >
+      <section id="contact" className="h-fit bg-baby-blue dark:bg-dg-primary-1600 mt-90p">
+        <h1 className="hidden">Contact us: Tell Us about Your Idea!</h1>
         <Contact defaultIndex={0} />
       </section>
-      </PageLayout>
+    </PageLayout>
   );
 }
 

frontend/src/pages/Portfolio.jsx

@@ -25,42 +25,48 @@ const _data = {
     {
       id: 0,
       title: 'Bi Healthcare Solution System',
-      imgUrl: 
-      'https://lh6.googleusercontent.com/D7N87i3udAln4YBp5SbaSI-9r2pVnnT5K2VT6p0G3dQanVgTMC2tdgz71PWOYco-7yQ=w2400',
+      imgUrl:
+        'https://lh6.googleusercontent.com/D7N87i3udAln4YBp5SbaSI-9r2pVnnT5K2VT6p0G3dQanVgTMC2tdgz71PWOYco-7yQ=w2400',
+      alt: 'Bi Healthcare Solution System',
       link: '/casestudybi',
     },
     {
       id: 1,
       title: 'Resource Planning System',
       imgUrl:
-      'https://lh5.googleusercontent.com/HLOh5coHfcEgDuftj1pOA9f1865xiIom5vyxTWNMKqMiivxL8Lg4c9ACzbfYYUdeuqQ=w2400',
+        'https://lh5.googleusercontent.com/HLOh5coHfcEgDuftj1pOA9f1865xiIom5vyxTWNMKqMiivxL8Lg4c9ACzbfYYUdeuqQ=w2400',
+      alt: 'Resource Planning System',
       link: '/casestudyresource',
     },
     {
       id: 2,
       title: 'Ticketing System for Passengers',
       imgUrl:
-      'https://lh5.googleusercontent.com/f_G0H0C_qLHhsU8PBj6uTkNigzKiXzd24B_pgJ6UqVmBKlU2Lyxv2r5lf6uvY9d_0PY=w2400',
+        'https://lh5.googleusercontent.com/f_G0H0C_qLHhsU8PBj6uTkNigzKiXzd24B_pgJ6UqVmBKlU2Lyxv2r5lf6uvY9d_0PY=w2400',
+      alt: 'Ticketing System for Passengers',
       link: '/casestudyticketing',
     },
     {
       id: 3,
       title: 'Financial Engine',
       imgUrl:
-      'https://lh3.googleusercontent.com/n-vcF1h8o4o3_CWZXoT-BQDLGFjL3_wt1twsDajycp8IhiiA2UkBoecsGd-ly_LRxJI=w2400',
+        'https://lh3.googleusercontent.com/n-vcF1h8o4o3_CWZXoT-BQDLGFjL3_wt1twsDajycp8IhiiA2UkBoecsGd-ly_LRxJI=w2400',
+      alt: 'Financial Engine',
       link: '/casestudyfinancial',
     },
     {
       id: 4,
       title: 'Centralized Monitoring System',
       imgUrl:
-      'https://lh4.googleusercontent.com/CwrSwX4UVcU-nYhEk4wWqsK8TUJbt881kVx2i4ryXYJ3xIsN8d7F1bY0qO_0thHCbBM=w2400',
+        'https://lh4.googleusercontent.com/CwrSwX4UVcU-nYhEk4wWqsK8TUJbt881kVx2i4ryXYJ3xIsN8d7F1bY0qO_0thHCbBM=w2400',
+      alt: 'Centralized Monitoring System',
       link: '/casestudycentralized',
     },
     {
       id: 5,
       title: 'Health Tracking Software',
       imgUrl: 'https://i.postimg.cc/HsKGcXVv/Strata-Thumb.jpg',
+      alt: 'Health Tracking Software',
       link: '/casestudystrata',
     },
   ],
@@ -97,7 +103,6 @@ export default function Portfolio() {
   //     }
   //   })
 
-
   //   const index = smallArray.length + largeArray.length;
 
   //   for (let i = 0; i < index; i++) {
@@ -157,26 +162,27 @@ export default function Portfolio() {
 
   useEffect(() => {
     document.title = 'Case Studies';
-  },[]);
+  }, []);
 
   return (
     <PageLayout>
-    <div className="flex flex-col gap-90p pt-32">
-      <Wrapper>
-        <div className="flex flex-col gap-8p">
-          <PageTitle
-            heading={_data.heading.heading}
-            subheading={_data.heading.subheading}
-            left
-            color
-          />
-          <p className="paragraph">{_data.heading.paragraph}</p>
-        </div>
-      </Wrapper>
-      <Wrapper>
-        <CardsGrid data={_data.cards} />
-      </Wrapper>
-    </div>
+      <div className="flex flex-col gap-90p pt-32">
+        <Wrapper>
+          <h1 className="hidden">Our Work - Case Studies</h1>
+          <div className="flex flex-col gap-8p">
+            <PageTitle
+              heading={_data.heading.heading}
+              subheading={_data.heading.subheading}
+              left
+              color
+            />
+            <p className="paragraph">{_data.heading.paragraph}</p>
+          </div>
+        </Wrapper>
+        <Wrapper>
+          <CardsGrid data={_data.cards} />
+        </Wrapper>
+      </div>
     </PageLayout>
   );
 }

frontend/src/pages/ProcessPage.jsx

@@ -10,7 +10,7 @@ import axios from 'axios';
 
 import Animation_Diligent from '../assets/animation_diligent.webm';
 
-import {ReactComponent as ProcessSvg} from './../assets/images/Process.svg';
+import { ReactComponent as ProcessSvg } from './../assets/images/Process.svg';
 import { m } from 'framer-motion';
 import PageLayout from '../layout/PageLayout';
 import ProcessFacelessSlider from '../components/shared/ProcessFacelessSlider';
@@ -18,96 +18,107 @@ import useWindowSize from '../hooks/useWindowSize';
 import ProcessSlider from '../components/ProcessSlider';
 
 const _data = {
-  heading : {
-    heading : "How We Do It?",
-    subheading: "Our Process",
-    paragraph: "We work with our clients to deliver the full software release lifecycle, from development to final rollout. We understand how important a good process is for success because our team members have deep backgrounds in product development. Our clients can rely on us for a complete software release solution that meets their needs and achieves their desired outcomes."
+  heading: {
+    heading: 'How We Do It?',
+    subheading: 'Our Process',
+    paragraph:
+      'We work with our clients to deliver the full software release lifecycle, from development to final rollout. We understand how important a good process is for success because our team members have deep backgrounds in product development. Our clients can rely on us for a complete software release solution that meets their needs and achieves their desired outcomes.',
   },
-  processImg : {
-    url: ""
+  processImg: {
+    url: '',
   },
-  cards : [
+  cards: [
     {
-      id: "1",
-      title: "Figure It Out",
+      id: '1',
+      title: 'Figure It Out',
       subtitle: "After understanding the company's goals, we build a digital strategy.",
       paragraphs: [
         {
-          paragraph: "We collaborate with you to comprehend each business possibility associated with your project. Early technological issues are identified, followed by study and solution architecture. Our user-centric methodology yields results that are straightforward and interesting. To better understand your user base, we create Personas, Journey Mapping, and Usability Testing."
-        }
-      ]
+          paragraph:
+            'We collaborate with you to comprehend each business possibility associated with your project. Early technological issues are identified, followed by study and solution architecture. Our user-centric methodology yields results that are straightforward and interesting. To better understand your user base, we create Personas, Journey Mapping, and Usability Testing.',
+        },
+      ],
     },
     {
-      id: "2",
-      title: "Solution Design",
-      subtitle: "Align user and business strategies.",
+      id: '2',
+      title: 'Solution Design',
+      subtitle: 'Align user and business strategies.',
       paragraphs: [
         {
-          paragraph: "User experience (UX) User research inevitably leads to design. Know your users, their requirements, and their objectives. Our multidisciplinary design team creates system flows, journey maps, annotated wireframes, final UI designs, and click-model prototypes."
+          paragraph:
+            'User experience (UX) User research inevitably leads to design. Know your users, their requirements, and their objectives. Our multidisciplinary design team creates system flows, journey maps, annotated wireframes, final UI designs, and click-model prototypes.',
         },
         {
-          paragraph: "Close communication is essential for success here, and concepts are iterated on both our and your teams. We'll keep optimizing until we have the ideal design that meets your needs and those of your users."
-        }
-      ]
+          paragraph:
+            "Close communication is essential for success here, and concepts are iterated on both our and your teams. We'll keep optimizing until we have the ideal design that meets your needs and those of your users.",
+        },
+      ],
     },
     {
-      id: "3",
-      title: "Build",
-      subtitle: "Delightful user experiences meet precise engineering.",
+      id: '3',
+      title: 'Build',
+      subtitle: 'Delightful user experiences meet precise engineering.',
       paragraphs: [
         {
-          paragraph: "Diligent can point you in the direction of the appropriate framework, language, and platform for your project, whether you already have a codebase or you start from scratch. Our talented group of developers includes computer scientists who are proficient in a variety of programming languages."
+          paragraph:
+            'Diligent can point you in the direction of the appropriate framework, language, and platform for your project, whether you already have a codebase or you start from scratch. Our talented group of developers includes computer scientists who are proficient in a variety of programming languages.',
         },
         {
-          paragraph: "We'll assist you in selecting the best technology for your project. We proceed with secure front-end, back-end, and full-stack development after deciding on the optimal strategy."
-        }
-      ]
+          paragraph:
+            "We'll assist you in selecting the best technology for your project. We proceed with secure front-end, back-end, and full-stack development after deciding on the optimal strategy.",
+        },
+      ],
     },
     {
-      id: "4",
-      title: "QA Test",
-      subtitle: "Maximum efficiency, zero bugs.",
+      id: '4',
+      title: 'QA Test',
+      subtitle: 'Maximum efficiency, zero bugs.',
       paragraphs: [
         {
-          paragraph: "We take pride in creating quality software. Our code is scalable, reusable, readable, and high performing. We have developed extensive testing processes and standardized Diligent Software Practices thanks to our more than 7 years of expertise in software development with a wide range of projects."
-        }
-      ]
+          paragraph:
+            'We take pride in creating quality software. Our code is scalable, reusable, readable, and high performing. We have developed extensive testing processes and standardized Diligent Software Practices thanks to our more than 7 years of expertise in software development with a wide range of projects.',
+        },
+      ],
     },
     {
-      id: "5",
-      title: "Launch",
-      subtitle: "Go Live!",
+      id: '5',
+      title: 'Launch',
+      subtitle: 'Go Live!',
       paragraphs: [
         {
-          paragraph: "We are prepared to launch after all sprints have ended and User Acceptance Testing (UAT) has been successful. Hosting is often done with Amazon AWS, which allows us to quickly grow, backup, and manage your application."
+          paragraph:
+            'We are prepared to launch after all sprints have ended and User Acceptance Testing (UAT) has been successful. Hosting is often done with Amazon AWS, which allows us to quickly grow, backup, and manage your application.',
         },
         {
-          paragraph: "Depending on the nature and complexity of the project, one or several releases may be appropriate. Your time to market will be accelerated in either case by our agile development."
-        }
-      ]
+          paragraph:
+            'Depending on the nature and complexity of the project, one or several releases may be appropriate. Your time to market will be accelerated in either case by our agile development.',
+        },
+      ],
     },
     {
-      id: "6",
-      title: "Maintain and Improve",
-      subtitle: "Continually optimize and grow.",
+      id: '6',
+      title: 'Maintain and Improve',
+      subtitle: 'Continually optimize and grow.',
       paragraphs: [
         {
-          paragraph: "We aim to provide long-term support for your program and establish ourselves as a reliable technological partner. We're here to support you while you update, monitor, and manage your app."
+          paragraph:
+            "We aim to provide long-term support for your program and establish ourselves as a reliable technological partner. We're here to support you while you update, monitor, and manage your app.",
         },
         {
-          paragraph: "We will work with you to ensure stability and longevity. We also assist with new concepts and features. Allow us to assist you with your plan so you may keep wowing your users, clients, and investors."
-        }
-      ]
+          paragraph:
+            'We will work with you to ensure stability and longevity. We also assist with new concepts and features. Allow us to assist you with your plan so you may keep wowing your users, clients, and investors.',
+        },
+      ],
     },
-
   ],
-  ActionCard : {
-    heading: "Let’s Work Together!",
-    paragraph: "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.",
-    primaryBtn: "Contact Us",
-    secondaryBtn: "Portfolio"
-  }
-}
+  ActionCard: {
+    heading: 'Let’s Work Together!',
+    paragraph:
+      '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.',
+    primaryBtn: 'Contact Us',
+    secondaryBtn: 'Portfolio',
+  },
+};
 
 const ProcessPage = () => {
   //const api_url = process.env.REACT_APP_API_URL;
@@ -151,70 +162,74 @@ const ProcessPage = () => {
 
   useEffect(() => {
     document.title = 'Process';
-  },[]);
+  }, []);
 
   useEffect(() => {
-    if (windowInfo.width < 1000) 
-    setIsMobile(true);
-    else
-    setIsMobile(false);
-  },[windowInfo]);
+    if (windowInfo.width < 1000) setIsMobile(true);
+    else setIsMobile(false);
+  }, [windowInfo]);
 
   return (
     <PageLayout>
-    <div className="pt-32">
-      {_data.heading.heading && (
-        <Wrapper>
-          <PageTitle
-            left
-            color
-            heading={_data.heading.heading}
-            subheading={_data.heading.subheading}
-          />
-          {/* <div className="flex justify-center items-center mt-90p overflow-x-auto">
+      <div className="pt-32">
+        {_data.heading.heading && (
+          <Wrapper>
+            <h1 className="hidden">Our Process - How We Do It?</h1>
+            <PageTitle
+              left
+              color
+              heading={_data.heading.heading}
+              subheading={_data.heading.subheading}
+            />
+            {/* <div className="flex justify-center items-center mt-90p overflow-x-auto">
             <div className='w-full' draggable >
                 <ProcessSvg className='' />
             </div>
             
           </div> */}
-          <div className="relative mx-auto my-32p md:my-90p">
-          {!isMobile ? (
-             <div className='w-full'>
-                <ProcessSvg className='' />
-            </div> 
-          ) :
-          (
-            <div className='' >
-            <ProcessSlider/>
-        </div>
-          )
-        }
-        </div>
-          <p className="my-90p">{_data.heading.paragraph}</p>
-        </Wrapper>
-      )}
-      <Wrapper bg padding={' py-90p'}>
-        {_data.cards.length > 0 && (
-          <ProcessCardsWrapper>
-            {_data.cards.map((item, index) => (
-              <ProcessCard
-                key={index}
-                id={item.id}
-                title={item.title}
-                subtitle={item.subtitle}
-                text={item.paragraphs}
-                numeric
-              />
-            ))}
-          </ProcessCardsWrapper>
+            <div className="relative mx-auto my-32p md:my-90p">
+              {!isMobile ? (
+                <div className="w-full">
+                  <ProcessSvg className="" />
+                </div>
+              ) : (
+                <div className="">
+                  <ProcessSlider />
+                </div>
+              )}
+            </div>
+            <p className="my-90p">{_data.heading.paragraph}</p>
+          </Wrapper>
         )}
-      </Wrapper>
-      <Wrapper>
-        <div className='my-90p'>
-        <ActionCard title={_data.ActionCard.heading} text={_data.ActionCard.paragraph} btn1={_data.ActionCard.primaryBtn} btn2={_data.ActionCard.secondaryBtn} link1={"/contact"} link2={'/portfolio'}/>
-        </div>
-      </Wrapper>
-    </div>
+        <Wrapper bg padding={' py-90p'}>
+          {_data.cards.length > 0 && (
+            <ProcessCardsWrapper>
+              {_data.cards.map((item, index) => (
+                <ProcessCard
+                  key={index}
+                  id={item.id}
+                  title={item.title}
+                  subtitle={item.subtitle}
+                  text={item.paragraphs}
+                  numeric
+                />
+              ))}
+            </ProcessCardsWrapper>
+          )}
+        </Wrapper>
+        <Wrapper>
+          <div className="my-90p">
+            <ActionCard
+              title={_data.ActionCard.heading}
+              text={_data.ActionCard.paragraph}
+              btn1={_data.ActionCard.primaryBtn}
+              btn2={_data.ActionCard.secondaryBtn}
+              link1={'/contact'}
+              link2={'/portfolio'}
+            />
+          </div>
+        </Wrapper>
+      </div>
     </PageLayout>
   );
 };

frontend/src/styles/text.css

@@ -8,7 +8,7 @@
   }
 
   .subheading {
-    @apply tracking-widest text-subhead font-secondary uppercase text-dg-secondary font-semibold
+    @apply tracking-widest text-subhead font-secondary uppercase text-dg-secondary font-semibold;
   }
 
   .h3-heading {
@@ -19,18 +19,18 @@
     @apply border-dg-primary-1000 capitalize text-dg-primary-1000 hover:border-dg-primary-1200 hover:text-white transition-all hover:transition-all;
   }
   .paragraph {
-    @apply text-p-mobile md:text-p text-dark-gray dark:text-white
+    @apply text-p-mobile md:text-p text-dark-gray dark:text-white;
   }
 
   .display-number {
-    @apply text-display-numb font-secondary font-bold  text-dg-primary-1000
+    @apply text-display-numb font-secondary font-bold  text-dg-primary-1000;
   }
   .number-title {
-    @apply text-title-24 font-secondary font-normal text-dark-gray
+    @apply text-title-24 font-secondary font-normal text-dark-gray;
   }
 
   .title-card {
-    @apply text-title font-semibold
+    @apply text-title font-semibold;
   }
 
   .subtitle-card-italic {
@@ -41,22 +41,21 @@
   }
 
   .title-italic {
-    @apply text-italic-title text-dg-primary-400 font-semibold italic my-8p capitalize
+    @apply text-italic-title text-dg-primary-400 font-semibold italic my-8p capitalize;
   }
-
 }
 
-  .no-wrap {
-    flex-wrap: nowrap;
-  }
+.no-wrap {
+  flex-wrap: nowrap;
+}
 
-  .title-colored {
-    background: linear-gradient(270deg, #90278F 0%, #8468BF 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
+.title-colored {
+  background: linear-gradient(270deg, #90278f 0%, #8468bf 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
 
-  .italic {
-    font-style: italic;
-  }
+.italic {
+  font-style: italic;
+}