How We Work component and stylistic changes

This commit is contained in:
Moris Zen
2018-07-09 12:45:39 +02:00
parent d3df457746
commit ea8a381e0d
10 changed files with 308 additions and 13 deletions

View File

@@ -30,10 +30,10 @@ class Header extends Component {
<div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">
<ul className="list-reset text-sm">
<Link to="/services">
<li className={menuClasses}>What We Do</li>
<li className={menuClasses}>Services</li>
</Link>
<Link to="/about">
<li className={menuClasses}>Who We Are</li>
<li className={menuClasses}>About Us</li>
</Link>
<Link to="/blog">
<li className={menuClasses}>Blog</li>

View File

@@ -0,0 +1,91 @@
import React from 'react'
import SectionIntro from './SectionIntro'
import HQCode from '../images/high-quality-code.svg'
import ContDelivery from '../images/continuous-delivery.svg'
import ModernDevops from '../images/modern-devops.svg'
import CodeReviews from '../images/code-reviews.svg'
import UXResearch from '../images/ux-research.svg'
import UnitIntegration from '../images/unit-and-integration-testing.svg'
const WorkStyle = ({ ...props }) => (
<section className="container rounded overflow-hidden shadow-md hover:shadow-lg mx-auto text-center my-12 p-4 bg-white">
<SectionIntro
headline="How We Work"
text="We are serving everything from Fortune 500 companies to startups and tailor our processes based on your scale and needs. We collaborate closely with our clients at each step of the development process and make sure that the solutions delivery great value and meet your specific business requirements"
/>
<div className="mx-auto py-6 text-center border-grey-lighter">
<div className="flex flex-wrap pt-6 text-grey-darker">
<div className="w-full md:w-1/2 p-6 md:border-r-2 border-grey-light">
<img src={HQCode} alt="High Quality Code" />
<h3 className="text-xl my-2">High Quality Code</h3>
<p className="leading-normal">
We have deep understanding of software engineering & computer
science and we know what it takes to write high-quality, performant
and maintainable code. Clean, readable, robust code is something we
strive for.
</p>
</div>
<div className="w-full md:w-1/2 p-4">
<img src={ContDelivery} alt="High Quality Code" />
<h3 className="text-xl my-2">Continuous delivery</h3>
<p className="leading-normal">
Deploying new code to production should not take weeks. We know how
to build pipelines that allow code changes to be pushed to different
cloud environments automatically. Deploying to production is as easy
as pressing a button.
</p>
</div>
</div>
<div className="flex flex-wrap md:border-t-2 border-grey-light text-grey-darker text-grey-darker">
<div className="w-full md:w-1/2 p-4 md:border-r-2 border-grey-light">
<img src={ModernDevops} alt="High Quality Code" />
<h3 className="text-xl my-2">Modern DevOps</h3>
<p className="leading-normal">
We like a "release early, release often" philosophy and to achieve
this we use modern DevOps tools like Docker. But DevOps is not only
about development and operations, it is also about quality.
Automated testing is part of our continuous delivery process,
deploying code with a high confidence level
</p>
</div>
<div className="w-full md:w-1/2 p-4">
<img src={CodeReviews} alt="High Quality Code" />
<h3 className="text-xl my-2">Code Reviews</h3>
<p className="leading-normal">
Two Heads are Better Than One. Code reviews are integrated part of
our process which makes catching bugs early before they event get
merged into the code. We make sure each change is reviewed by
multiple people before shipping it to the production environment.
</p>
</div>
</div>
<div className="flex flex-wrap md:border-t-2 border-grey-light text-grey-darker text-grey-darker">
<div className="w-full md:w-1/2 p-4 md:border-r-2 border-grey-light">
<img src={UXResearch} alt="High Quality Code" />
<h3 className="text-xl my-2">UX testing/research</h3>
<p className="leading-normal">
We know it takes more than just an user video or a survey to
understand your user experience. We improve UX by watching how real
customers interact with your interface (websites, mobile devices,
prototypes). The research generates actionable findings to redesign
your site or application.
</p>
</div>
<div className="w-full md:w-1/2 p-4">
<img src={UnitIntegration} alt="High Quality Code" />
<h3 className="text-xl my-2">Unit & Integration testing</h3>
<p className="leading-normal">
Unit and integration testing are vital parts of the testing process.
Having automated unit & integration tests is the key prerequisite
for writing high-quality code at a fast pace.
</p>
</div>
</div>
</div>
</section>
)
export default WorkStyle

View File

@@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="164px" height="140px" viewBox="0 0 164 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>Code_reviews</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Code_reviews">
<g id="Group-42" transform="translate(18.000000, 14.000000)">
<g id="Group-38">
<circle id="Oval-7" fill="#B8E986" cx="55" cy="55" r="55"></circle>
<g id="Group-35" transform="translate(9.000000, 2.000000)" stroke="#646EF2">
<g id="Group-34">
<polygon id="Path-10" fill="#FFFFFF" points="0 0 44 0 44 58 0 58"></polygon>
<path d="M9,18.5 L23,18.5" id="Path-2"></path>
<path d="M9,25.5 L23,25.5" id="Path-2"></path>
<path d="M9,32.5 L23,32.5" id="Path-2"></path>
<path d="M9,39.5 L23,39.5" id="Path-2"></path>
<polyline id="Path-11" stroke-width="2" points="19 46.4386757 23.1682628 53 35 38"></polyline>
<path d="M9,10.5 L23,10.5" id="Path-2"></path>
</g>
<g id="Group-34" transform="translate(13.000000, 9.000000)">
<polygon id="Path-10" fill="#FFFFFF" points="0 0 44 0 44 58 0 58"></polygon>
<path d="M9,18.5 L23,18.5" id="Path-2"></path>
<path d="M9,25.5 L23,25.5" id="Path-2"></path>
<path d="M9,32.5 L23,32.5" id="Path-2"></path>
<path d="M9,39.5 L23,39.5" id="Path-2"></path>
<polyline id="Path-11" stroke-width="2" points="19 46.4386757 23.1682628 53 35 38"></polyline>
<path d="M9,10.5 L23,10.5" id="Path-2"></path>
</g>
<g id="Group-34" transform="translate(29.000000, 14.000000)">
<polygon id="Path-10" fill="#FFFFFF" points="0 0 44 0 44 58 0 58"></polygon>
<path d="M9,18.5 L23,18.5" id="Path-2"></path>
<path d="M9,25.5 L23,25.5" id="Path-2"></path>
<path d="M9,32.5 L23,32.5" id="Path-2"></path>
<path d="M9,39.5 L23,39.5" id="Path-2"></path>
<path d="M9,10.5 L23,10.5" id="Path-2"></path>
</g>
</g>
</g>
<g id="Group-40" transform="translate(37.000000, 43.000000)">
<g id="Group-39" transform="translate(4.000000, 2.000000)" stroke="#646EF2" stroke-width="2">
<ellipse id="Oval-8" fill="#FFFFFF" cx="30.2089552" cy="30.0769231" rx="30.2089552" ry="30.0769231"></ellipse>
<path d="M55.1571369,47.7300713 L86.6865672,66.6923077" id="Path-19"></path>
</g>
<g id="ic_code">
<polygon id="Bounds" points="0 0 63 0 63 63 0 63"></polygon>
<path d="M29.125,42.85 L19.1013514,32.5 L29.125,22.15 L26.0743243,19 L13,32.5 L26.0743243,46 L29.125,42.85 L29.125,42.85 Z M39.875,42.85 L49.8986486,32.5 L39.875,22.15 L42.9256757,19 L56,32.5 L42.9256757,46 L39.875,42.85 L39.875,42.85 Z" id="Icon" fill="#646EF2"></path>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="164px" height="140px" viewBox="0 0 164 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>Continuous_delivery</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Continuous_delivery">
<g id="Group-44" transform="translate(30.000000, 17.000000)">
<g id="Group-43" transform="translate(56.000000, 6.000000)" stroke="#646EF2" stroke-width="2">
<path d="M12.0187265,85.2938448 C5.33957551,91.0979483 2,94 2,94 C27.9573832,94 49,72.9573832 49,47 C49,21.0426168 27.9573832,0 2,0" id="Oval-9"></path>
<path d="M15,100 L1,95" id="Path-20"></path>
</g>
<g id="Group-43" transform="translate(24.500000, 50.500000) scale(-1, -1) translate(-24.500000, -50.500000) " stroke="#646EF2" stroke-width="2">
<path d="M12.0187265,85.2938448 C5.33957551,91.0979483 2,94 2,94 C27.9573832,94 49,72.9573832 49,47 C49,21.0426168 27.9573832,0 2,0" id="Oval-9"></path>
<path d="M15,100 L1,95" id="Path-20"></path>
</g>
<g id="ic_swap_horiz" transform="translate(23.000000, 31.000000)" fill="#B8E986">
<polygon id="Path" points="13.0581818 20 0 33 13.0581818 46 13.0581818 36.25 36 36.25 36 29.75 13.0581818 29.75"></polygon>
<polygon id="Path" points="59 13 45.9418182 0 45.9418182 9.75 23 9.75 23 16.25 45.9418182 16.25 45.9418182 26"></polygon>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 12 KiB

View File

@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="164px" height="140px" viewBox="0 0 164 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>Modern_DevOps</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Modern_DevOps">
<g id="Group-45" transform="translate(5.000000, 29.000000)">
<g id="ic_settings" transform="translate(64.000000, 0.000000)">
<polygon id="Bounds" points="0 0 24 0 24 24 0 24"></polygon>
<path d="M19.43,12.98 C19.47,12.66 19.5,12.34 19.5,12 C19.5,11.66 19.47,11.34 19.43,11.02 L21.54,9.37 C21.73,9.22 21.78,8.95 21.66,8.73 L19.66,5.27 C19.54,5.05 19.27,4.97 19.05,5.05 L16.56,6.05 C16.04,5.65 15.48,5.32 14.87,5.07 L14.49,2.42 C14.46,2.18 14.25,2 14,2 L10,2 C9.75,2 9.54,2.18 9.51,2.42 L9.13,5.07 C8.52,5.32 7.96,5.66 7.44,6.05 L4.95,5.05 C4.72,4.96 4.46,5.05 4.34,5.27 L2.34,8.73 C2.21,8.95 2.27,9.22 2.46,9.37 L4.57,11.02 C4.53,11.34 4.5,11.67 4.5,12 C4.5,12.33 4.53,12.66 4.57,12.98 L2.46,14.63 C2.27,14.78 2.22,15.05 2.34,15.27 L4.34,18.73 C4.46,18.95 4.73,19.03 4.95,18.95 L7.44,17.95 C7.96,18.35 8.52,18.68 9.13,18.93 L9.51,21.58 C9.54,21.82 9.75,22 10,22 L14,22 C14.25,22 14.46,21.82 14.49,21.58 L14.87,18.93 C15.48,18.68 16.04,18.34 16.56,17.95 L19.05,18.95 C19.28,19.04 19.54,18.95 19.66,18.73 L21.66,15.27 C21.78,15.05 21.73,14.78 21.54,14.63 L19.43,12.98 L19.43,12.98 Z M12,15.5 C10.07,15.5 8.5,13.93 8.5,12 C8.5,10.07 10.07,8.5 12,8.5 C13.93,8.5 15.5,10.07 15.5,12 C15.5,13.93 13.93,15.5 12,15.5 L12,15.5 Z" id="Icon" fill="#646EF2"></path>
</g>
<g id="ic_settings" transform="translate(64.000000, 58.000000)">
<polygon id="Bounds" points="0 0 24 0 24 24 0 24"></polygon>
<path d="M19.43,12.98 C19.47,12.66 19.5,12.34 19.5,12 C19.5,11.66 19.47,11.34 19.43,11.02 L21.54,9.37 C21.73,9.22 21.78,8.95 21.66,8.73 L19.66,5.27 C19.54,5.05 19.27,4.97 19.05,5.05 L16.56,6.05 C16.04,5.65 15.48,5.32 14.87,5.07 L14.49,2.42 C14.46,2.18 14.25,2 14,2 L10,2 C9.75,2 9.54,2.18 9.51,2.42 L9.13,5.07 C8.52,5.32 7.96,5.66 7.44,6.05 L4.95,5.05 C4.72,4.96 4.46,5.05 4.34,5.27 L2.34,8.73 C2.21,8.95 2.27,9.22 2.46,9.37 L4.57,11.02 C4.53,11.34 4.5,11.67 4.5,12 C4.5,12.33 4.53,12.66 4.57,12.98 L2.46,14.63 C2.27,14.78 2.22,15.05 2.34,15.27 L4.34,18.73 C4.46,18.95 4.73,19.03 4.95,18.95 L7.44,17.95 C7.96,18.35 8.52,18.68 9.13,18.93 L9.51,21.58 C9.54,21.82 9.75,22 10,22 L14,22 C14.25,22 14.46,21.82 14.49,21.58 L14.87,18.93 C15.48,18.68 16.04,18.34 16.56,17.95 L19.05,18.95 C19.28,19.04 19.54,18.95 19.66,18.73 L21.66,15.27 C21.78,15.05 21.73,14.78 21.54,14.63 L19.43,12.98 L19.43,12.98 Z M12,15.5 C10.07,15.5 8.5,13.93 8.5,12 C8.5,10.07 10.07,8.5 12,8.5 C13.93,8.5 15.5,10.07 15.5,12 C15.5,13.93 13.93,15.5 12,15.5 L12,15.5 Z" id="Icon" stroke="#646EF2" stroke-width="2"></path>
</g>
<path d="M77,40.3414639 C95.0978212,23.1905542 108.889382,5.0277944 124.793286,5.0000346 C140.697189,4.97227479 153.73636,21.6537114 153.639164,40.3414639 C153.541967,59.0292164 140.552685,69.7626846 124.793286,69.9986108 C109.033886,70.234537 77,40.3414639 77,40.3414639 Z" id="Path-13" stroke="#646EF2" stroke-width="2" fill="#FFFFFF"></path>
<path d="M76.6397036,40.3414639 C58.5418824,23.1905542 44.7503214,5.0277944 28.846418,5.0000346 C12.9425147,4.97227479 -0.0966568916,21.6537114 0.000539894911,40.3414639 C0.0977366814,59.0292164 13.0870184,69.7626846 28.846418,69.9986108 C44.6058177,70.234537 76.6397036,40.3414639 76.6397036,40.3414639 Z" id="Path-13" stroke="#646EF2" stroke-width="2" fill="#FFFFFF"></path>
<polyline id="Path-14" stroke="#B8E986" stroke-width="2" points="42 33.85 42 28 19 28 19 54 42 54 42 48.8"></polyline>
<polygon id="Path" stroke="#B8E986" stroke-width="2" points="27.4210526 27.1538462 27.4210526 23 33.5789474 23 33.5789474 27.1538462 37 27.1538462 37 32 24 32 24 27.1538462"></polygon>
<polyline id="Path-15" stroke="#646EF2" stroke-width="2" points="28 41 35 48 49 33"></polyline>
<g id="Group-37" transform="translate(107.000000, 17.000000)" fill="#B8E986">
<rect id="Rectangle-15" x="9" y="27" width="8" height="8"></rect>
<rect id="Rectangle-15" x="18" y="27" width="8" height="8"></rect>
<rect id="Rectangle-15" x="27" y="27" width="8" height="8"></rect>
<rect id="Rectangle-15" x="4" y="18" width="8" height="8"></rect>
<rect id="Rectangle-15" x="13" y="18" width="8" height="8"></rect>
<rect id="Rectangle-15" x="8" y="9" width="8" height="8"></rect>
<rect id="Rectangle-15" x="12" y="0" width="8" height="8"></rect>
<rect id="Rectangle-15" x="17" y="9" width="8" height="8"></rect>
<rect id="Rectangle-15" x="22" y="18" width="8" height="8"></rect>
<rect id="Rectangle-15" x="0" y="27" width="8" height="8"></rect>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.2 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 20 KiB

View File

@@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="164px" height="140px" viewBox="0 0 164 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 47 (45396) - http://www.bohemiancoding.com/sketch -->
<title>research</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="research">
<g id="Group-33" transform="translate(22.000000, 6.000000)">
<path d="M66.0574038,121 C89.7739448,121 109,101.300529 109,77 C109,52.699471 89.7739448,33 66.0574038,33 C64.0013188,33 61.9789837,33.1480587 60,33.4343383" id="Oval-5" stroke="#646EF2" stroke-width="2" transform="translate(84.500000, 77.000000) rotate(-345.000000) translate(-84.500000, -77.000000) "></path>
<polygon id="Path-6" stroke="#646EF2" stroke-width="2" fill="#FFFFFF" points="0 118 65.4246011 118 76 107 16.7687772 107"></polygon>
<polygon id="Path-6" fill="#B8E986" points="1 111 65.5637511 111 76 100 17.5481354 100"></polygon>
<polyline id="Path-7" stroke="#646EF2" stroke-width="2" points="111 81 111 120.529412 39 120.529412 39 129 111 129 111 121.941176"></polyline>
<ellipse id="Oval-6" stroke="#646EF2" fill="#FFFFFF" cx="110" cy="81.5" rx="6" ry="6.5"></ellipse>
<g id="Group-30" transform="translate(63.529704, 43.741922) rotate(-14.000000) translate(-63.529704, -43.741922) translate(36.029704, 11.241922)">
<polygon id="Path-4" fill="#646EF2" transform="translate(31.764281, 29.340225) rotate(7.000000) translate(-31.764281, -29.340225) " points="12.3624949 45.7914076 29.8360551 55.6269902 51.1660663 11.7758992 32.8823038 3.05346076"></polygon>
<polygon id="Path-5" stroke="#646EF2" stroke-width="2" transform="translate(15.980809, 52.410185) rotate(7.000000) translate(-15.980809, -52.410185) " points="5.14562856 42.37342 30.650452 55.6432687 27.2791797 62.4469495 1.31116628 48.7669434"></polygon>
<path d="M4.68522664,49.0297043 C2.00173334,53.4481494 3.0602441,57.5291743 7.86075891,61.2727792 C12.6612737,65.0163841 17.4760068,65.0163841 22.3049582,61.2727792 L4.68522664,49.0297043 Z" id="Path-8" stroke="#646EF2" stroke-width="2" fill="#FFFFFF"></path>
</g>
<path d="M70,15.1287705 C72.2837073,1.38330388 74.2837073,-2.99567858 76,1.99182317 C77.7162927,6.97932492 79.7162927,9.24927077 82,8.8016607 L78.5884921,18 L70,15.1287705 Z" id="Path-9" stroke="#646EF2" stroke-width="2"></path>
<polygon id="Path-3" fill="#646EF2" points="23.3918789 97 12 106 23.3918789 106 33 97"></polygon>
<polygon id="Path-3" fill="#646EF2" points="36.2785544 97 27 106 38.3918789 106 48 97"></polygon>
<polygon id="Path-3" fill="#646EF2" points="52.5675472 97 43.139427 106 61.7214138 106 70 97"></polygon>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

@@ -11,6 +11,7 @@ import ImgIntro from '../images/software-consulting.svg'
import ImgDesign from '../images/ux-ui-design-agency.svg'
import ImgFullstack from '../images/fullstack-web-development-agency.svg'
import ImgMobile from '../images/mobile-development-agency.svg'
import LogoIBM from '../images/logo-ibm-color.svg'
import LogoRicoh from '../images/logo-ricoh-color.svg'
import LogoKinnarps from '../images/logo-kinnarps-color.svg'
@@ -32,9 +33,9 @@ const IndexPage = ({ ...props }) => (
<main>
<section className="container mx-auto max-w-lg text-center my-12 p-4">
<SectionIntro
intro="Services"
intro="We do this"
headline="Because great code makes our heart pound"
text="We have a deep passion for cutting edge technologies and incredible user experiences. We create custom end-to-end solutions that will make you stand out. Our skilled team can even help you with initial analysis, architecture design, testing and deployments"
text="We have a deep passion for cutting edge technologies and incredible user experiences. We create custom end-to-end solutions that will make you stand out. Our experienced tech leads can even help you with initial analysis, architecture design, testing and deployments"
/>
</section>
@@ -51,7 +52,7 @@ const IndexPage = ({ ...props }) => (
<Service
img={ImgDesign}
title="User Experience Design"
text="Our approach is simple: focus on how users can use the product in the best way possible. We offer UX and interface design for all screens and devices. The solutions are usually shaped through iterative processes of research, prototyping and testing."
text="Our approach is simple: focus on how users might use the product in the best way possible. We offer UX and interface design for all screens and devices. The solutions are usually shaped through iterative processes of research, prototyping and testing."
/>
<Service
@@ -65,7 +66,7 @@ const IndexPage = ({ ...props }) => (
img={ImgMobile}
imgClasses="max-h-sm"
title="Mobile App Development"
text="We have the necessary skillset to develop iOS and Android applications using both native languages and hybrid solutions. Solutions for iOS are built with Swift & Objective-C and Android solutions with Java & Kotlin. We enjoy using technologies such as React Native to build cross-platform native apps."
text="We have the necessary skillset to develop iOS and Android applications using both native languages and hybrid solutions. Solutions for iOS are built with Swift & Objective-C and Android solutions are built with Java & Kotlin. We love using technologies like React Native to build cross-platform native apps."
/>
<div className="py-8 text-center lg:flex justify-center">
@@ -82,7 +83,7 @@ const IndexPage = ({ ...props }) => (
<SectionIntro
intro="Clients"
headline="With ambitious projects comes great responsibility"
text="We think big, design smart and develop fast for teams of various sizes. Currently were serving everything from Fortune 500 companies to startups and we tailor our processes based on your scale and needs. We have helped some of the worlds leading enterprises and businesses bring ideas to life and were really interested in hearing what we can help you with"
text="We think big, design smart and develop fast for teams of various sizes. We have helped some of the worlds leading enterprises and businesses bring ideas to life and were really interested in hearing what we can help you with"
/>
<div className="p-4 md:flex items-center max-w-full justify-center">
<img

View File

@@ -2,6 +2,7 @@ import React from 'react'
import PageIntro from '../components/PageIntro'
import SectionIntro from '../components/SectionIntro'
import WorkStyle from '../components/WorkStyle'
const ServicesPage = () => (
<div>
@@ -19,12 +20,7 @@ const ServicesPage = () => (
/>
</section>
<section className="container mx-auto my-12 p-4">
<SectionIntro
headline="How we work"
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
/>
</section>
<WorkStyle />
</div>
)