|
|
|
@@ -1,287 +1,274 @@ |
|
|
|
import React, { Children, useEffect, useState } from 'react'; |
|
|
|
import { Link } from 'react-router-dom'; |
|
|
|
import React, { Children, Fragment, useEffect } from 'react'; |
|
|
|
import CustomLink from '../components/root/CustomLink'; |
|
|
|
import TertiaryButton from '../components/root/TertiaryButton'; |
|
|
|
import ActionCard from '../components/shared/ActionCard'; |
|
|
|
import CardLife from '../components/shared/CardLife'; |
|
|
|
import PageHeading from '../components/shared/PageHeading'; |
|
|
|
import PageTitle from '../components/shared/PageTitle'; |
|
|
|
import Testimonials from '../components/Testimonials'; |
|
|
|
//import useAnalytics from '../hooks/useAnalytics' |
|
|
|
import Wrapper from '../layout/Wrapper'; |
|
|
|
import { ReactComponent as DownalodIcon } from './../assets/download-icon.svg'; |
|
|
|
import { ReactComponent as BusIcon } from './../assets/icons/workwithus/bus.svg'; |
|
|
|
import { ReactComponent as FintechIcon } from './../assets/icons/workwithus/empty-wallet-tick.svg'; |
|
|
|
import { ReactComponent as HospitalIcon } from './../assets/icons/workwithus/hospital.svg'; |
|
|
|
import { ReactComponent as SchoolIcon } from './../assets/icons/workwithus/teacher.svg'; |
|
|
|
import useAnalytics from '../hooks/useAnalytics'; |
|
|
|
import axios from 'axios'; |
|
|
|
|
|
|
|
import useDataApi from '../hooks/useDataApi'; |
|
|
|
import Animation_Diligent from '../assets/animation_diligent.webm'; |
|
|
|
import ReactHelmet from '../components/shared/ReactHelmet'; |
|
|
|
import Wrapper from '../layout/Wrapper'; |
|
|
|
|
|
|
|
import PageLayout from '../layout/PageLayout'; |
|
|
|
import PageTitleOneFont from '../components/shared/PageTitleOneFont'; |
|
|
|
import GradientWrapper from '../components/shared/GradientWrapper'; |
|
|
|
|
|
|
|
import '../App.css'; |
|
|
|
import useAnalytics from './../hooks/useAnalytics'; |
|
|
|
|
|
|
|
const _data = { |
|
|
|
downloadIcon: '', |
|
|
|
const api_url = process.env.REACT_APP_API_URL; |
|
|
|
|
|
|
|
const download = { |
|
|
|
downloadFilePath: `${process.env.PUBLIC_URL}/DiligentCompanyOverview.pdf`, |
|
|
|
downloadFileName: 'Diligent Company Overview.pdf', |
|
|
|
problems: [ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
title: 'Lack of dedication and long-term commitment', |
|
|
|
paragraph: |
|
|
|
'More often than not, our clients come to realize that the only familiar face they see from the company to which they outsource is the account manager. Technical staff fluctuates, hampering team cohesion, and preventing meaningful progress and team growth - there’s little valuable knowledge accumulation in the team.', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
title: 'Resources are unable to scale with what the company needs', |
|
|
|
paragraph: |
|
|
|
'Dynamic of the business environment demands from our clients the ability to perform a fast-paced scale up and down of their tech teams. The delays introduced due to lack of available resources, or lack of appropriate resources, prolong the development process or stop it altogether. Inability to quickly scale down impacts the budget, flexibility in responding to unforeseen market conditions, and fast repurposing of resources. ', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
title: 'Lack of quality tech-staff that wouldn’t break a bank', |
|
|
|
paragraph: |
|
|
|
'Our clients are unable to onboard enough high-quality tech resources to cover all their needs . The two main reasons for this are lack of available high-quality resources and the cost of those resources.', |
|
|
|
}, |
|
|
|
], |
|
|
|
help: [ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
title: 'We outsource for a company, not a project', |
|
|
|
paragraph: |
|
|
|
'All of our resources are dedicated to a single client. We provide the conditions, and expect them to put all their focus into understanding the whole of the client’s business - from high level to the details. This approach allows for knowledge accumulation and increase in value of their contribution with time.', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
title: 'Long term, dedicated engineers', |
|
|
|
paragraph: |
|
|
|
'Related to the previous point, our relationships with the clients tend to be very long-term. We have, where the relationship was long enough, the same resources onboarded with the same client for more than a decade. Our resources are more a part of the client’s company then they are of Diligent - Diligent is just the venue allowing them to do their job. ', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
title: 'Jump right in - we know our domains', |
|
|
|
paragraph: |
|
|
|
'Diligent’s resources, in business domains where we have accumulated experience, are capable of quickly producing high-value contributions to our clients. We know the concepts, we are familiar with the processes, we’ve faced the problems and solved them. If faced with something new - we’ll learn and do it quickly.', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 4, |
|
|
|
title: 'Competitive prices', |
|
|
|
paragraph: |
|
|
|
'Diligent provides a low entry price for our new clients until proven as a valuable partner. Even afterwards, once we’ve shown what we can do and contribute meaningfully to our client’s business, we tend to operate with lower fees than our competitors. Simply ask us for a bid or a pricing table and we’ll show you.', |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
|
|
|
|
const Segment = ({ children }) => { |
|
|
|
return <div className="py-[48px] mx-auto w-full text-center">{children}</div>; |
|
|
|
}; |
|
|
|
const strapiPopulate = [ |
|
|
|
'Heading', |
|
|
|
'Heading.subtitle', |
|
|
|
'Heading.title', |
|
|
|
'Problems', |
|
|
|
'Highlighted', |
|
|
|
'Highlighted.title', |
|
|
|
'Highlighted.paragraph', |
|
|
|
'WhyWork', |
|
|
|
'WhyWork.img', |
|
|
|
'Stats', |
|
|
|
'SucessParagraph', |
|
|
|
'Spec', |
|
|
|
'Download', |
|
|
|
'OfficeImg', |
|
|
|
]; |
|
|
|
|
|
|
|
const TechCard = ({ children }) => { |
|
|
|
return ( |
|
|
|
<div className="rounded-[8px] bg-white py-[24px] px-[32px] items-center justify-center text-center"> |
|
|
|
{children} |
|
|
|
</div> |
|
|
|
); |
|
|
|
const stringBuilder = () => { |
|
|
|
let stringQuery = ''; |
|
|
|
strapiPopulate.map((item, index) => { |
|
|
|
if (index !== 0) stringQuery += '&'; |
|
|
|
stringQuery += `populate=${item}`; |
|
|
|
}); |
|
|
|
return stringQuery; |
|
|
|
}; |
|
|
|
const HelpParagraph = ({ title, paragraph }) => { |
|
|
|
|
|
|
|
const NumberIcon = ({ number }) => { |
|
|
|
return ( |
|
|
|
<div> |
|
|
|
<h4 className="font-semibold text-title">{title}</h4> |
|
|
|
<p>{paragraph}</p> |
|
|
|
<div className="bg-baby-blue rounded-[6px] h-[48px] w-[48px] flex justify-center items-center text-center font-semibold text-dg-primary-900 text-n-h3-heading-mobile md:n-h3-heading"> |
|
|
|
<h4>{number}.</h4> |
|
|
|
</div> |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
const api_url = process.env.REACT_APP_API_URL; |
|
|
|
|
|
|
|
const WorkWithUs = () => { |
|
|
|
useAnalytics('Work With Us'); |
|
|
|
const [cnt, setCnt] = useState(''); |
|
|
|
const [isLoaded, setIsLoaded] = useState(''); |
|
|
|
|
|
|
|
useEffect(async () => { |
|
|
|
const [{ data, isLoading, isError }, doFetch] = useDataApi( |
|
|
|
`${api_url}/api/work-with-us-page?${stringBuilder()}`, |
|
|
|
); |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
document.title = 'Work With Us'; |
|
|
|
var vid = document.getElementById('animation'); |
|
|
|
vid.playbackRate = 2; |
|
|
|
await axios |
|
|
|
.get( |
|
|
|
`${api_url}/api/aboutpage?populate[0]=SEO&populate[1]=SEO.metaSocial&populate[2]=SEO.metaImage&populate[3]=SEO.metaSocial.image`, |
|
|
|
) |
|
|
|
.then(res => { |
|
|
|
setCnt(res.data.data.attributes); |
|
|
|
setIsLoaded(true); |
|
|
|
}) |
|
|
|
.catch(err => { |
|
|
|
console.log(err); |
|
|
|
setIsLoaded(false); |
|
|
|
}); |
|
|
|
}, []); |
|
|
|
|
|
|
|
if (!isLoaded) { |
|
|
|
if (isLoading) { |
|
|
|
return ( |
|
|
|
<div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 dark:text-white flex items-center justify-center text-3xl font-semibold"> |
|
|
|
<div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 overflow-hidden dark:text-white flex items-center justify-center text-3xl font-semibold"> |
|
|
|
<video id="animation" width="540" height="540" autoPlay muted loop> |
|
|
|
<source src={Animation_Diligent} type="video/webm" /> |
|
|
|
Loading... |
|
|
|
</video> |
|
|
|
</div> |
|
|
|
); |
|
|
|
} |
|
|
|
return ( |
|
|
|
<div className="mt-90p"> |
|
|
|
{cnt.SEO && <ReactHelmet seo={cnt.SEO} />} |
|
|
|
<Wrapper padding={' py-[48px]'}> |
|
|
|
<PageTitle heading={'Diligent at a Glance'} subheading={'work with us'} /> |
|
|
|
</Wrapper> |
|
|
|
<div className="flex flex-col md:flex gap-[32px] w-fit mx-auto"> |
|
|
|
<CustomLink |
|
|
|
href={_data.downloadFilePath} |
|
|
|
downloadFile={_data.downloadFileName} |
|
|
|
context={'Company Overview'} |
|
|
|
> |
|
|
|
<p>Company Overview</p> |
|
|
|
<DownalodIcon /> |
|
|
|
</CustomLink> |
|
|
|
</div> |
|
|
|
<Segment> |
|
|
|
<p>Our clients primarily come from one of the following 4 business domains:</p> |
|
|
|
</Segment> |
|
|
|
<Wrapper bg padding={' py-[48px]'}> |
|
|
|
<div className="flex grid grid-cols-2 lg:grid-cols-4 gap-32p items-center justify-center mx-auto"> |
|
|
|
<TechCard> |
|
|
|
<FintechIcon className="mx-auto" /> |
|
|
|
<p>Fintech</p> |
|
|
|
</TechCard> |
|
|
|
<TechCard> |
|
|
|
<HospitalIcon className="mx-auto" /> |
|
|
|
<p>Healthcare</p> |
|
|
|
</TechCard> |
|
|
|
<TechCard> |
|
|
|
<BusIcon className="mx-auto" /> |
|
|
|
<p>Transportation</p> |
|
|
|
</TechCard> |
|
|
|
<TechCard> |
|
|
|
<SchoolIcon className="mx-auto" /> |
|
|
|
<p>Education</p> |
|
|
|
</TechCard> |
|
|
|
</div> |
|
|
|
</Wrapper> |
|
|
|
<Wrapper padding={' py-[48px]'}> |
|
|
|
<p className="pb-32p max-w-[1000px] mx-auto"> |
|
|
|
Within those domains, our customers range from startups (11.2 Ventures), over |
|
|
|
small and medium sized companies (Gold Bullion International, Intellum…), to |
|
|
|
Fortune 500 companies (Henry Schein…). |
|
|
|
</p> |
|
|
|
<p className="max-w-[1000px] mx-auto"> |
|
|
|
Decision to outsource the whole, or a part, of software development accompanied |
|
|
|
with a demand for personal, long-term, dedication and responsibility is common |
|
|
|
for our clients. Most of them have already had some experience with other |
|
|
|
outsourcing companies, or are in active relationships with other outsourcing |
|
|
|
companies, when they decide to give us a try. |
|
|
|
</p> |
|
|
|
</Wrapper> |
|
|
|
<Wrapper padding={' py-[48px]'}> |
|
|
|
<h4 className="font-semibold font-secondary text-[#9B32CE] text-subtitle-48 text-center w-full"> |
|
|
|
What Are Their Problems? |
|
|
|
</h4> |
|
|
|
</Wrapper> |
|
|
|
<Wrapper> |
|
|
|
<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} |
|
|
|
} else { |
|
|
|
return ( |
|
|
|
<PageLayout> |
|
|
|
<div className="mt-[48px] md:mt-[180px]"> |
|
|
|
<Wrapper padding={' py-[48px]'}> |
|
|
|
{data ? ( |
|
|
|
<Fragment> |
|
|
|
<PageTitleOneFont |
|
|
|
heading={data.Heading.title} |
|
|
|
subheading={data.Heading.subtitle} |
|
|
|
left |
|
|
|
/> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
<p className="mt-[16px] mr-0 md:mr-[400px] n-paragraph"> |
|
|
|
{data.HeadingParagraph} |
|
|
|
</p> |
|
|
|
</Fragment> |
|
|
|
) : null} |
|
|
|
</Wrapper> |
|
|
|
<div className="mx-auto md:mx-2/5 pb-90p"> |
|
|
|
<Wrapper padding={' md:py-[48px]'}> |
|
|
|
{data ? ( |
|
|
|
<h2 className="n-h3-heading md:text-center">{data.ProblemsTitle}</h2> |
|
|
|
) : null} |
|
|
|
</Wrapper> |
|
|
|
|
|
|
|
<Wrapper padding={' py-[48px]'}> |
|
|
|
{data ? ( |
|
|
|
<div className="flex flex-col gap-90p max-w-[860px] mx-auto"> |
|
|
|
{data.Problems.map((item, index) => ( |
|
|
|
<div key={index} className="flex flex-col md:flex-row gap-[32px]"> |
|
|
|
<div> |
|
|
|
<NumberIcon number={index + 1} /> |
|
|
|
</div> |
|
|
|
<div className="flex flex-col gap-[4px]"> |
|
|
|
<h6 className="n-paragraph-title">{item.title}</h6> |
|
|
|
<p className="n-paragraph">{item.paragraph}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
) : null} |
|
|
|
</Wrapper> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</Wrapper> |
|
|
|
<Wrapper padding={' py-[48px] mb-32p'}> |
|
|
|
<h4 className="font-semibold font-secondary text-[#9B32CE] text-subtitle-48 text-center w-full"> |
|
|
|
How We Help Them? |
|
|
|
</h4> |
|
|
|
</Wrapper> |
|
|
|
<Wrapper padding={' py-90p'}> |
|
|
|
<section> |
|
|
|
<div className="flex flex-col justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0 mb-32p"> |
|
|
|
<div className="flex flex-col gap-[72px] w-full max-w-[950px] mx-auto"> |
|
|
|
{_data.help.map((item, index) => ( |
|
|
|
<HelpParagraph |
|
|
|
key={index} |
|
|
|
title={item.title} |
|
|
|
paragraph={item.paragraph} |
|
|
|
/> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
{data ? ( |
|
|
|
<GradientWrapper padding={'py-32p md:py-90p'}> |
|
|
|
<h6 className="n-h3-heading text-white">{data.Highlighted.title}</h6> |
|
|
|
<p className="n-paragraph text-white md:max-w-[800px] mx-0 md:mx-auto"> |
|
|
|
{data.Highlighted.paragraph} |
|
|
|
</p> |
|
|
|
</GradientWrapper> |
|
|
|
) : null} |
|
|
|
{data ? ( |
|
|
|
<Wrapper padding={' py-[32px] md:py-[200px]'}> |
|
|
|
<div className="flex flex-col gap-[64px] md:gap-[120px]"> |
|
|
|
{data.WhyWork.map((item, index) => ( |
|
|
|
<div |
|
|
|
key={index} |
|
|
|
className={ |
|
|
|
(index % 2 |
|
|
|
? 'flex flex-col md:flex-row-reverse ' |
|
|
|
: 'flex flex-col md:flex-row ') + |
|
|
|
'w-full justify-between items-center gap-[24px] md:gap-0' |
|
|
|
} |
|
|
|
> |
|
|
|
<div> |
|
|
|
<img src={api_url + item.img.data.attributes.url}></img> |
|
|
|
</div> |
|
|
|
<div className="flex flex-col gap-[8px] md:gap-[16px] max-w-[520px]"> |
|
|
|
<h6 className="n-h3-heading text-dark-gray">{item.title}</h6> |
|
|
|
<p className="n-paragraph">{item.paragraph}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
</Wrapper> |
|
|
|
) : null} |
|
|
|
{data ? ( |
|
|
|
<GradientWrapper padding={'py-32p md:py-90p'}> |
|
|
|
<div className="max-w-custom flex flex-col md:flex-row md:justify-between gap-[64px] md:gap-0"> |
|
|
|
{data.Stats.map((item, index) => ( |
|
|
|
<div key={index} className="flex flex-col gap-[8px] text-center"> |
|
|
|
<h6 className="n-heading text-white">{item.value}</h6> |
|
|
|
<p className="n-paragraph-title text-white">{item.title}</p> |
|
|
|
</div> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
</GradientWrapper> |
|
|
|
) : null} |
|
|
|
<Wrapper padding={' py-[48px] md:py-[200px]'}> |
|
|
|
{data ? ( |
|
|
|
<div className="flex flex-col gap-[16px]"> |
|
|
|
<h6 className="n-h3-heading text-dark-gray">{data.SuccessTitle}</h6> |
|
|
|
{data.SucessParagraph.map((item, index) => ( |
|
|
|
<p key={index} className="n-paragraph"> |
|
|
|
{item.ParagraphElement} |
|
|
|
</p> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
) : null} |
|
|
|
</Wrapper> |
|
|
|
<div className="mx-auto md:mx-2/5 pb-90p"> |
|
|
|
<Wrapper padding={' md:py-[48px]'}> |
|
|
|
{data ? ( |
|
|
|
<h6 className="n-h3-heading md:text-center text-dark-gray"> |
|
|
|
{data.SpecTitle} |
|
|
|
</h6> |
|
|
|
) : null} |
|
|
|
</Wrapper> |
|
|
|
|
|
|
|
<Wrapper padding={' py-[48px]'}> |
|
|
|
{data ? ( |
|
|
|
<div className="flex flex-col sm:flex-row gap-[48px] mx-auto justify-center z-10 opacity-100 font-semibold"> |
|
|
|
<div className="flex flex-col gap-32p sm:mb-8"> |
|
|
|
<div className="bg-white py-32p px-[24px] rounded-[8px] text-center shadow-[0_3px_10px_rgb(0,0,0,0.2)]"> |
|
|
|
{data.Spec[0].title} |
|
|
|
</div> |
|
|
|
<div className="bg-white py-32p px-[24px] rounded-[8px] text-center shadow-[0_3px_10px_rgb(0,0,0,0.2)]"> |
|
|
|
{data.Spec[1].title} |
|
|
|
</div> |
|
|
|
<div className="bg-white py-32p px-[24px] rounded-[8px] text-center shadow-[0_3px_10px_rgb(0,0,0,0.2)]"> |
|
|
|
{data.Spec[2].title} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="flex flex-col gap-32p sm:mt-8"> |
|
|
|
<div className="bg-white py-32p px-[24px] rounded-[8px] text-center shadow-[0_3px_10px_rgb(0,0,0,0.2)]"> |
|
|
|
{data.Spec[3].title} |
|
|
|
</div> |
|
|
|
<div className="bg-white py-32p px-[24px] rounded-[8px] text-center shadow-[0_3px_10px_rgb(0,0,0,0.2)]"> |
|
|
|
{data.Spec[4].title} |
|
|
|
</div> |
|
|
|
<div className="bg-white py-32p px-[24px] rounded-[8px] text-center shadow-[0_3px_10px_rgb(0,0,0,0.2)]"> |
|
|
|
{data.Spec[5].title} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="flex flex-col gap-32p sm:mb-8"> |
|
|
|
<div className="bg-white py-32p px-[24px] rounded-[8px] text-center shadow-[0_3px_10px_rgb(0,0,0,0.2)]"> |
|
|
|
{data.Spec[6].title} |
|
|
|
</div> |
|
|
|
<div className="bg-white py-32p px-[24px] rounded-[8px] text-center shadow-[0_3px_10px_rgb(0,0,0,0.2)]"> |
|
|
|
{data.Spec[7].title} |
|
|
|
</div> |
|
|
|
<div className="bg-white py-32p px-[24px] rounded-[8px] text-center shadow-[0_3px_10px_rgb(0,0,0,0.2)]"> |
|
|
|
{data.Spec[8].title} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : null} |
|
|
|
<div className="flex absolute w-full top-0 z-[-1]"> |
|
|
|
<div className="w-[624px] h-[624px] bg-indigo-500 opacity-25 rounded-full mx-auto blur-[100px]"></div> |
|
|
|
</div> |
|
|
|
</Wrapper> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</Wrapper> |
|
|
|
<Wrapper padding={' py-90p'} bg> |
|
|
|
<h4 className="font-semibold font-secondary text-[#9B32CE] text-subtitle-48 text-center w-full py-32p"> |
|
|
|
What Our Customers Say? |
|
|
|
</h4> |
|
|
|
<Testimonials noTitle /> |
|
|
|
</Wrapper> |
|
|
|
<Wrapper padding={' py-[48px] mb-32p'}> |
|
|
|
<h4 className="font-semibold font-secondary text-[#9B32CE] text-subtitle-48 text-center w-full py-32p"> |
|
|
|
Success |
|
|
|
</h4> |
|
|
|
<p className="max-w-[1000px] mx-auto text-center w-full"> |
|
|
|
For us, the definition of success is a multifaceted subject. In short, we don’t |
|
|
|
declare a victory unless: |
|
|
|
</p> |
|
|
|
<ul className="mx-[72px] lg:mx-[250px]"> |
|
|
|
<li className="my-32p list-disc"> |
|
|
|
Deliverables are <b className="text-[#9B32CE]">on time and within budget</b> |
|
|
|
</li> |
|
|
|
<li className="my-32p list-disc"> |
|
|
|
Deliverables are <b className="text-[#9B32CE]">what the client needs</b>. We |
|
|
|
produce meaningful and positive contributions, we do not want to tick the |
|
|
|
checkboxes just so that we can call it done. |
|
|
|
</li> |
|
|
|
<li className="my-32p list-disc"> |
|
|
|
Our resources involved with the client{' '} |
|
|
|
<b className="text-[#9B32CE]">have gained knowledge in the process</b>, they |
|
|
|
understand the client’s business, what they’ve created and most importantly - |
|
|
|
why it was created |
|
|
|
</li> |
|
|
|
<li className="my-32p list-disc"> |
|
|
|
Our clients can{' '} |
|
|
|
<b className="text-[#9B32CE]">demonstratively measure the improvements</b> in |
|
|
|
stability, volume, earnings, their client/user satisfaction…as a result of our |
|
|
|
contributions.{' '} |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</Wrapper> |
|
|
|
<Wrapper padding={' py-32p'}> |
|
|
|
<div className="flex flex-col md:flex gap-[32px] w-fit mx-auto"> |
|
|
|
<CustomLink |
|
|
|
href={_data.downloadFilePath} |
|
|
|
downloadFile |
|
|
|
context={'Company Overview'} |
|
|
|
> |
|
|
|
<p>Company Overview</p> |
|
|
|
<DownalodIcon /> |
|
|
|
</CustomLink> |
|
|
|
</div> |
|
|
|
</Wrapper> |
|
|
|
{data ? ( |
|
|
|
<div className="md:mb-[200px]"> |
|
|
|
<div className="w-full relative mt-12 z-[-1]"> |
|
|
|
<div className="radial-gradient absolute top-0 left-0 right-0 bottom-0"></div> |
|
|
|
<div className="max-w-custom mx-auto"> |
|
|
|
<img |
|
|
|
src={api_url + data.OfficeImg.data.attributes.url} |
|
|
|
alt={data.OfficeImgAlt} |
|
|
|
></img> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="max-w-[600px] mx-[16px] md:mx-auto md:mt-[-320px] p-[24px] flex flex-col gap-[24px] z-20 bg-white rounded-[16px] shadow-[0_3px_10px_rgb(0,0,0,0.2)] md:shadow-none"> |
|
|
|
<div className="flex flex-col gap-[8px]"> |
|
|
|
<h6 className="n-h3-heading text-dark-gray font-bold"> |
|
|
|
{data.Download.title} |
|
|
|
</h6> |
|
|
|
<p className="n-paragraph">{data.Download.paragraph}</p> |
|
|
|
</div> |
|
|
|
<CustomLink |
|
|
|
href={download.downloadFilePath} |
|
|
|
downloadFile={download.downloadFileName} |
|
|
|
context={'Company Overview'} |
|
|
|
> |
|
|
|
<p>{data.Download.button}</p> |
|
|
|
</CustomLink> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : null} |
|
|
|
|
|
|
|
<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> |
|
|
|
); |
|
|
|
<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> |
|
|
|
</PageLayout> |
|
|
|
); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
export default WorkWithUs; |
ntasicc
3 jaren geleden