workwithuspage

frontend/.env

@@ -1,3 +1,4 @@
+PUBLIC_URL = "http://localhost:3000"
 FAST_REFRESH=false
 CHOKIDAR_USEPOLLING=true
 REACT_APP_SERVICE_ID = service_petbzsz

frontend/src/App.js

@@ -19,11 +19,18 @@ 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';
 
 
 
 // Navigation Links
 const links = [
+  {
+    name: 'Work with Us',
+    description: '',
+    href: '/workwithus',
+    icon: '',
+  },
   {
     name: 'Case Studies',
     description: '',
@@ -120,6 +127,7 @@ function App() {
         <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>
 
       <Footer

frontend/src/assets/download-icon.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 11.5098L12 14.5098L15 11.5098" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 14.5098V6.50977" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 16.5098C9.89 17.8098 14.11 17.8098 18 16.5098" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/src/assets/icons/workwithus/bus.svg

@@ -0,0 +1,7 @@
+<svg width="80" height="81" viewBox="0 0 80 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M56.334 73.8327H23.6673C18.0007 73.8327 13.334 69.1993 13.334 63.4993V17.4994C13.334 11.8327 17.9673 7.16602 23.6673 7.16602H56.334C62.0006 7.16602 66.6673 11.7994 66.6673 17.4994V63.4993C66.6673 69.1993 62.034 73.8327 56.334 73.8327Z" stroke="#902890" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M61.6673 43.8327H18.334C15.5673 43.8327 13.334 41.5993 13.334 38.8327V32.166C13.334 29.3993 15.5673 27.166 18.334 27.166H61.6673C64.434 27.166 66.6673 29.3993 66.6673 32.166V38.8327C66.6673 41.5993 64.434 43.8327 61.6673 43.8327Z" stroke="#902890" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.3144 59.5007H28.3443" stroke="#902890" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M51.6484 59.5007H51.6783" stroke="#902890" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.666 17.166H48.3327" stroke="#902890" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/src/assets/icons/workwithus/empty-wallet-tick.svg

@@ -0,0 +1,8 @@
+<svg width="80" height="81" viewBox="0 0 80 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M60.134 45.6673C58.734 47.0339 57.934 49.0006 58.134 51.1006C58.434 54.7006 61.734 57.3339 65.334 57.3339H71.6673V61.3006C71.6673 68.2006 66.034 73.834 59.134 73.834H25.434C26.4673 72.9673 27.3673 71.9006 28.0673 70.7006C29.3006 68.7006 30.0007 66.334 30.0007 63.834C30.0007 56.4673 24.034 50.5007 16.6673 50.5007C13.534 50.5007 10.634 51.6007 8.33398 53.434V38.8673C8.33398 31.9674 13.9673 26.334 20.8673 26.334H59.134C66.034 26.334 71.6673 31.9674 71.6673 38.8673V43.6674H64.934C63.0673 43.6674 61.3673 44.4006 60.134 45.6673Z" stroke="#902890" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.33398 41.8663V26.6332C8.33398 22.6665 10.7673 19.133 14.4673 17.733L40.934 7.73305C45.0673 6.16638 49.5007 9.23314 49.5007 13.6665V26.3331" stroke="#902890" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M75.1967 47.0678V53.9347C75.1967 55.768 73.73 57.2679 71.8633 57.3346H65.33C61.73 57.3346 58.43 54.7012 58.13 51.1012C57.93 49.0012 58.73 47.0346 60.13 45.6679C61.3633 44.4012 63.0633 43.668 64.93 43.668H71.8633C73.73 43.7346 75.1967 45.2345 75.1967 47.0678Z" stroke="#902890" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.334 40.5H46.6673" stroke="#902890" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.0007 63.8333C30.0007 66.3333 29.3006 68.7 28.0673 70.7C27.3673 71.9 26.4673 72.9667 25.434 73.8333C23.1007 75.9333 20.034 77.1667 16.6673 77.1667C11.8007 77.1667 7.56732 74.5667 5.26732 70.7C4.03399 68.7 3.33398 66.3333 3.33398 63.8333C3.33398 59.6333 5.26732 55.8667 8.33398 53.4333C10.634 51.6 13.534 50.5 16.6673 50.5C24.034 50.5 30.0007 56.4667 30.0007 63.8333Z" stroke="#902890" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.4727 63.8311L14.7726 67.131L21.8726 60.5645" stroke="#902890" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/src/assets/icons/workwithus/hospital.svg

@@ -0,0 +1,7 @@
+<svg width="80" height="81" viewBox="0 0 80 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.66602 73.834H73.3326" stroke="#902890" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M56.6667 7.16602H23.3333C13.3333 7.16602 10 13.1327 10 20.4993V73.8326H70V20.4993C70 13.1327 66.6667 7.16602 56.6667 7.16602Z" stroke="#902890" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M46.8668 50.5H33.1001C31.4001 50.5 29.9668 51.9 29.9668 53.6333V73.8333H49.9668V53.6333C50.0001 51.9 48.6001 50.5 46.8668 50.5Z" stroke="#902890" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40 20.5V37.1667" stroke="#902890" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.666 28.834H48.3327" stroke="#902890" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/src/assets/icons/workwithus/teacher.svg

@@ -0,0 +1,5 @@
+<svg width="80" height="81" viewBox="0 0 80 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.4991 8.93296L13.4324 22.033C6.99909 26.233 6.99909 35.633 13.4324 39.833L33.4991 52.933C37.0991 55.2996 43.0324 55.2996 46.6324 52.933L66.5991 39.833C72.9991 35.633 72.9991 26.2663 66.5991 22.0663L46.6324 8.9663C43.0324 6.5663 37.0991 6.5663 33.4991 8.93296Z" stroke="#902890" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.7658 44.0996L18.7324 59.7329C18.7324 63.9663 21.9991 68.4996 25.9991 69.8329L36.6324 73.3663C38.4658 73.9663 41.4991 73.9663 43.3658 73.3663L53.9991 69.8329C57.9991 68.4996 61.2658 63.9663 61.2658 59.7329V44.2663" stroke="#902890" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M71.334 50.5V30.5" stroke="#902890" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/src/components/OpenDayBanner.jsx

@@ -3,19 +3,19 @@ import './../App.css'
 
 
 export default function OpenDayBanner() {
-    const [isHover,setHover] = useState(false);
+    const [isHover, setHover] = useState(false);
 
     return (
         <a href="/openday">
-            <div className={"bg-[#7274AB] size-07 absolute left-[-25px] top-[-50px] rounded-full md:top-[-15px] md:left-0 transition-all px-6 py-2 b-50"+(isHover ? " md:scale-125" : "")} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
-            
-            <div className={"relative flex justify-center items-center"}>
-            <h2 className={"uppercase text-sm z-10 text-white transition-all"}>Open Day - October 26 !</h2>
-            </div>
-            
-              
-              
+            <div className={"bg-[#7274AB] size-07 absolute left-[-25px] top-[-50px] rounded-full md:top-[-15px] md:left-0 transition-all px-6 py-2 b-50" + (isHover ? " md:scale-125" : "")} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
+
+                <div className={"relative flex justify-center items-center"}>
+                    <h2 className={"uppercase text-sm z-10 text-white transition-all"}>Open Day - October 26 !</h2>
+                </div>
+
+
+
             </div>
-          </a>
+        </a>
     )
 }

frontend/src/components/Testimonials.jsx

@@ -38,15 +38,18 @@ const _data = {
     ]
 }
 
-export default function Testimonials() {
+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">
-            <div className="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">

frontend/src/components/root/CustomLink.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import {Link} from 'react-router-dom';
+
+const CustomLink = ({href, downloadFile, bg, txt, children}) => {
+
+
+  return (
+    // <a href={href} {...(downloadFile && { download="My_File.pdf" })} (downloadFile  download="My_File.pdf")>
+    //     {context}
+    // </a>
+    <Link {...{
+        className: 'flex gap-2 items-center px-[16px] py-[12px] text-p font-medium bg-[#8568BF] text-white rounded-full' ,
+        to: href,
+        target: '_blank',
+        ...(downloadFile && {download: true}),
+      }}>
+        {children} 
+    </Link>
+  )
+}
+
+export default CustomLink

frontend/src/components/root/TertiaryButton.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const TertiaryButton = ({action, icon}) => {
+  return (
+    <button onClick={() => action()}></button>
+  )
+}
+
+export default TertiaryButton

frontend/src/components/shared/Navigation.jsx

@@ -49,7 +49,7 @@ export default function Navigation({ links, scrollToView, activeLinks }) {
                 key={item.name}
                 to={item.href}
                 className={({ isActive }) => {
-                  return `text-base font-medium dark:text-white hover:text-dg-primary-900 focus:text-dg-primary-900 active:text-dg-primary-900 capitalize ${activeLinks(
+                  return `text-p font-medium dark:text-white hover:text-dg-primary-900 focus:text-dg-primary-900 active:text-dg-primary-900 capitalize ${activeLinks(
                     isActive,
                   )}`;
                 }}
@@ -62,7 +62,7 @@ export default function Navigation({ links, scrollToView, activeLinks }) {
               // onClick={event => scrollToView(event)}
               onClick={event => checkUrl(event)}
               href="#contact"
-              className="contact-us-link"
+              className="contact-us-link text-p"
             >
               Contact
             </div>
@@ -113,7 +113,7 @@ export default function Navigation({ links, scrollToView, activeLinks }) {
                         onClick={() => close()}
                         key={item.name}
                         to={item.href}
-                        className="p-3 flex justify-center items-center rounded-md transition-all hover:transition-all hover:bg-dg-primary-900 hover:text-white"
+                        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"
@@ -129,7 +129,7 @@ export default function Navigation({ links, scrollToView, activeLinks }) {
                         close();
                         checkUrl(event);
                       }}
-                      className="contact-us-link flex justify-center items-center"
+                      className="contact-us-link flex justify-center items-center text-p"
                     >
 
                       <span className="ml-3 text-base font-medium text-inherit">

frontend/src/components/shared/PageTitle.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 const PageTitle = ({heading, subheading, left, color,pb}) => {
     return (
-        <div className={"flex flex-col gap-8p"+ (left ? " text-left items-start":" text-center items-center") + (color ? " title-colored" : "") + (pb && ` pb-2`)}>
+        <div className={"flex flex-col gap-8p"+ (left ? " text-left items-start":" text-center items-center") + (color ? " title-colored" : " ") + (pb ? ' pb-2' :' ')}>
             <h6 className={"subheading" + (left ? " text-left":" text-center")}>{subheading}</h6>
             <h1 className={"heading" + (left ? " text-left":" text-center")}>{heading}</h1>
         </div>

frontend/src/pages/WorkWithUs.jsx

@@ -0,0 +1,213 @@
+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

frontend/tailwind.config.js

@@ -9,7 +9,7 @@ module.exports = {
     fontSize: {
       'head' : ['56px', {
         letterSpacing: '1px',
-        lineHeight: '55px',
+        lineHeight: '74px',
       }],
       'subhead' : ['12px', {
         letterSpacing: '28px',
@@ -70,7 +70,12 @@ module.exports = {
       'display-numb' : ['56px', {
         letterSpacing: '2px',
         lineHeight: 'normal'
+      }],
+      'subtitle-48' : ['48px', {
+        letterSpacing: '0px',
+        lineHeight: 'normal'
       }]
+
     },
     minHeight: {
       '12': '3rem',