website-new/frontend/src/pages/WorkWithUs.jsx

import React, { Children } from 'react'
import { Link } from 'react-router-dom'
import CustomLink from '../components/root/CustomLink'
import TertiaryButton from '../components/root/TertiaryButton'
import ActionCard from '../components/shared/ActionCard'
import CardLife from '../components/shared/CardLife'
import PageHeading from '../components/shared/PageHeading'
import PageTitle from '../components/shared/PageTitle'
import Testimonials from '../components/Testimonials'
import Wrapper from '../layout/Wrapper'
import PDF from './../assets/docs/DiligentCompanyOverview.pdf';
import {ReactComponent as DownalodIcon } from './../assets/download-icon.svg'
import {ReactComponent as BusIcon } from './../assets/icons/workwithus/bus.svg'
import {ReactComponent as FintechIcon } from './../assets/icons/workwithus/empty-wallet-tick.svg'
import {ReactComponent as HospitalIcon } from './../assets/icons/workwithus/hospital.svg'
import {ReactComponent as SchoolIcon } from './../assets/icons/workwithus/teacher.svg'

const _data = {
    downloadIcon: '',
    downloadFilePath: `${process.env.PUBLIC_URL}/DiligentCompanyOverview.pdf`,
    downloadFileName: 'DiligentCompanyOverview.pptx',
    problems: [
      {
        id:1,
        title:'Lack of dedication and long-term commitment',
        paragraph:'More often than not, our clients come to realize that the only familiar face they see from the company to which they outsource is the account manager. Technical staff fluctuates, hampering team cohesion, and preventing meaningful progress and team growth - there’s little valuable knowledge accumulation in the team.'
      },
      {
        id:2,
        title:'Resources are unable to scale with what the company needs',
        paragraph:'Dynamic of the business environment demands from our clients the ability to perform a fast-paced scale up and down of their tech teams. The delays introduced due to lack of available resources, or lack of appropriate resources, prolong the development process or stop it altogether. Inability to quickly scale down impacts the budget, flexibility in responding to unforeseen market conditions, and fast repurposing of resources.  ',
      },
      {
        id:3,
        title:'Lack of quality tech-staff that wouldn’t break a bank',
        paragraph:'Our clients are unable to onboard enough high-quality tech resources to cover all their needs . The two main reasons for this are lack of available high-quality resources and the cost of those resources.',
      }
    ],
    help: [
      {
        id:1,
        title:'We outsource for a company, not a project',
        paragraph:'All of our resources are dedicated to a single client. We provide the conditions, and expect them to put all their focus into understanding the whole of the client’s business - from high level to the details. This approach allows for knowledge accumulation and increase in value of their contribution with time.'
      },
      {
        id:2,
        title:'Long term, dedicated engineers',
        paragraph:'Related to the previous point, our relationships with the clients tend to be very long-term. We have, where the relationship was long enough, the same resources onboarded with the same client for more than a decade. Our resources are more a part of the client’s company then they are of Diligent - Diligent is just the venue allowing them to do their job. ',
      },
      {
        id:3,
        title:'Jump right in - we know our domains',
        paragraph:'Diligent’s resources, in business domains where we have accumulated experience, are capable of quickly producing high-value contributions to our clients. We know the concepts, we are familiar with the processes, we’ve faced the problems and solved them. If faced with something new - we’ll learn and do it quickly.'
      },
      {
        id:4,
        title:'Competitive prices',
        paragraph:'Diligent provides a low entry price for our new clients until proven as a valuable partner. Even afterwards, once we’ve shown what we can do and contribute meaningfully to our client’s business, we tend to operate with lower fees than our competitors. Simply ask us for a bid or a pricing table and we’ll show you.'
      }
    ]

    
};

const Segment = ({children}) => {
  return (
    <div className='py-[48px] mx-auto w-full text-center'>
      {children}
    </div>
  );
}

const TechCard = ({children}) => {
  return (
    <div className='rounded-[8px] bg-white py-[24px] px-[32px] items-center justify-center text-center'>
      {children}
    </div>
  )
}
const HelpParagraph = ({title, paragraph, key}) => {
  return (
    <div className='' key={key}>
      <h4 className='font-semibold text-title'>{title}</h4>
      <p>{paragraph}</p>
    </div>
  )
}

const WorkWithUs = () => {

  return (
    <div className='mt-90p'>
      <Wrapper padding={' py-[48px]'}>
        <PageTitle heading={'Diligent at a Glance'} subheading={'work with us'} color />
        </Wrapper>
        <div className='flex flex-col md:flex gap-[32px] w-fit mx-auto'>
            <CustomLink href={_data.downloadFilePath} downloadFile context={'Company Overview'}>
              <p>Company Overview</p>
              <DownalodIcon/>
            </CustomLink>
        </div>
        <Segment>
          <p>Our clients primarily come from one of the following 4 business domains:</p>
        </Segment>
        <Wrapper bg padding={' py-[48px]'}>
          <div className='flex grid grid-cols-2 lg:grid-cols-4 gap-32p items-center justify-center mx-auto'>
            <TechCard>
              <FintechIcon className='mx-auto'/>
              <p>Fintech</p>
            </TechCard>
            <TechCard>
              <HospitalIcon className='mx-auto'/>
              <p>Healthcare</p>
            </TechCard>
            <TechCard>
              <BusIcon className='mx-auto'/>
              <p>Transportation</p>
            </TechCard>
            <TechCard>
              <SchoolIcon className='mx-auto'/>
              <p>Education</p>
            </TechCard>
          </div>
        </Wrapper>
        <Wrapper padding={' py-[48px]'}>
          <p className='pb-32p max-w-[1000px] mx-auto'>Within those domains, our customers range from startups (11.2 Ventures), over small and medium sized companies (Gold Bullion International, Intellum…), to Fortune 500 companies (BlackRock, Henry Schein…).</p>
          <p className='max-w-[1000px] mx-auto'>Decision to outsource the whole, or a part, of software development accompanied with a demand for personal, long-term, dedication and responsibility is common for our clients. Most of them have already had some experience with other outsourcing companies, or are in active relationships with other outsourcing companies, when they decide to give us a try.</p>
        </Wrapper>
        <Wrapper padding={' py-[48px]'}>
          <h4 className='font-semibold font-secondary text-[#9B32CE] text-subtitle-48 text-center w-full'>What are their Problems?</h4>
        </Wrapper>
        <Wrapper >
        <section>
              
        
              <div className="flex flex-col justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0 mb-[90px]">
                <div className="flex flex-col gap-32p w-full max-w-[950px] mx-auto">
                  {_data.problems.map((item, index) => (
                    <CardLife
                      key={index}
                      number={item.id}
                      heading={item.title}
                      paragraph={item.paragraph}
                    />
                  ))}
                </div>
                </div>
            </section>
        </Wrapper>
        <Wrapper padding={' py-[48px] mb-32p'}>
          <h4 className='font-semibold font-secondary text-[#9B32CE] text-subtitle-48 text-center w-full'>And how We help Them?</h4>
        </Wrapper>
        <Wrapper padding={' py-90p'}>
        <section>
              
        
              <div className="flex flex-col justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0 mb-32p">
                <div className="flex flex-col gap-[72px] w-full max-w-[950px] mx-auto">
                  {_data.problems.map((item, index) => (
                    <HelpParagraph
                       key={index}
                       title={item.title}
                       paragraph={item.paragraph}
                       />
                  ))}
                </div>
                </div>
            </section>
        </Wrapper>
        <Wrapper padding={' py-90p'} bg>
            <h4 className='font-semibold font-secondary text-[#9B32CE] text-subtitle-48 text-center w-full py-32p'>And Do We?</h4>
            <Testimonials noTitle />
        </Wrapper>
        <Wrapper padding={' py-[48px] mb-32p'}>
          <h4 className='font-semibold font-secondary text-[#9B32CE] text-subtitle-48 text-center w-full py-32p'>Success</h4>
          <p className='max-w-[1000px] mx-auto text-center w-full'>For us, the definition of success is a multifaceted subject. In short, we don’t declare a victory unless:</p>
                    <ul className='mx-[72px] lg:mx-[250px]'>
                      <li className='my-32p list-disc'>Deliverables are <b className='text-[#9B32CE]'>on time and within budget</b></li>
                      <li className='my-32p list-disc'>Deliverables are <b className='text-[#9B32CE]'>what the client needs</b>. We produce meaningful and positive contributions, we do not want to tick the checkboxes just so that we can call it done.</li> 
                      <li className='my-32p list-disc'>Our resources involved with the client <b className='text-[#9B32CE]'>have gained knowledge in the process</b>, they understand the client’s business, what they’ve created and most importantly - why it was created</li>
                      <li className='my-32p list-disc'>Our clients can <b className='text-[#9B32CE]'>demonstratively measure the improvements</b> in stability, volume, earnings, their client/user satisfaction…as a result of our contributions. </li>              

                    </ul>
        </Wrapper>
        <Wrapper padding={' py-32p'}>
        <div className='flex flex-col md:flex gap-[32px] w-fit mx-auto'>
            <CustomLink href={_data.downloadFilePath} downloadFile context={'Company Overview'}>
              <p>Company Overview</p>
              <DownalodIcon/>
            </CustomLink>
        </div>
        </Wrapper>
        
        <Wrapper padding={' py-90p'}>
        <ActionCard 
          title="Let's Work Together!"
          text="We’d be happy to try and find a way to contribute to your business."
          btn2="Portfolio"
          btn1="Contact Us"
          link2={'/portfolio'}
          link1={'/contact'}
        />
        </Wrapper>
       
        
         
    </div>
    
  )

}

export default WorkWithUs