senaduka/old-v2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change in illustration and styling

Browse Source
This commit is contained in:
Moris Zen
2018-08-08 20:42:10 +02:00
parent f2edf25e5d
commit 6754263181
6 changed files with 189 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Card.js
View File

@@ -4,7 +4,7 @@ import Link from 'gatsby-link'
import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'
const Card = ({ ...props }) => (
<article className="h-full w-full rounded overflow-hidden bg-white border-bottom-saburly hover:shadow-md">
<article className="h-full w-full rounded overflow-hidden shadow bg-white border-bottom-saburly hover:shadow-md">
<Link to={props.url}>
{props.image ? (
<img className="w-full" src={props.image.src} />

8
src/components/PageIntro.js
View File

@@ -5,7 +5,11 @@ import Button from './Button'
const PageIntro = ({ ...props }) => (
<section className="bg-saburly-light relative">
<div className="container mx-auto flex lg:flex-row flex-col flex-col-reverse p-4">
<div
className={`container mx-auto flex lg:flex-row flex-col ${
props.reversed ? 'flex-col-reverse' : ''
} p-4`}
>
<div className="text-center lg:text-left lg:mt-4">
<SectionIntro
intro={props.intro}
@@ -26,7 +30,7 @@ const PageIntro = ({ ...props }) => (
{props.image && (
<img
src={props.image}
className={`${props.imgClasses} md:max-w-md p-8 z-10`}
className={`${props.imgClasses} md:max-w-md mx-auto lg:p-8 z-10`}
alt="Software Development Agency"
/>
)}

62
src/images/web-development-services.svg → src/images/web-development-services-agency.svg
View File

@@ -95,35 +95,19 @@
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#EAE9F1" offset="100%"></stop>
</linearGradient>
<linearGradient x1="60.9185764%" y1="89.3430744%" x2="4.41921906%" y2="0.703110787%" id="linearGradient-24">
<stop stop-color="#ADA7C7" offset="0%"></stop>
<stop stop-color="#ECE7F9" stop-opacity="0.00379302536" offset="100%"></stop>
</linearGradient>
<linearGradient x1="76.9888796%" y1="16.7734139%" x2="-11.6510841%" y2="73.2727713%" id="linearGradient-25">
<stop stop-color="#72669D" offset="0%"></stop>
<stop stop-color="#ADA7C7" offset="100%"></stop>
</linearGradient>
<linearGradient x1="76.9888796%" y1="16.7734139%" x2="-11.6510841%" y2="73.2727713%" id="linearGradient-26">
<stop stop-color="#EAE9F1" offset="0%"></stop>
<stop stop-color="#ECE7F9" offset="100%"></stop>
</linearGradient>
<linearGradient x1="15.4820432%" y1="76.2997855%" x2="100%" y2="25.92039%" id="linearGradient-27">
<stop stop-color="#ADA7C7" offset="0%"></stop>
<stop stop-color="#EAE9F1" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="4.35290299%" x2="-16.4868306%" y2="70.8068236%" id="linearGradient-28">
<linearGradient x1="100%" y1="4.35290299%" x2="-16.4868306%" y2="70.8068236%" id="linearGradient-24">
<stop stop-color="#72669D" offset="0%"></stop>
<stop stop-color="#E3E1EC" offset="100%"></stop>
</linearGradient>
<linearGradient x1="6.91688929%" y1="50%" x2="92.7657572%" y2="50%" id="linearGradient-29">
<linearGradient x1="6.91688929%" y1="50%" x2="92.7657572%" y2="50%" id="linearGradient-25">
<stop stop-color="#B4AAD7" offset="0%"></stop>
<stop stop-color="#5640A6" offset="100%"></stop>
</linearGradient>
<linearGradient x1="59.7528456%" y1="27.3752585%" x2="59.7528458%" y2="129.42446%" id="linearGradient-30">
<linearGradient x1="59.7528456%" y1="27.3752585%" x2="59.7528458%" y2="129.42446%" id="linearGradient-26">
<stop stop-color="#5640A6" offset="0%"></stop>
<stop stop-color="#B4AAD7" offset="100%"></stop>
</linearGradient>
<linearGradient x1="59.7528456%" y1="27.3752585%" x2="59.7528458%" y2="130.821243%" id="linearGradient-31">
<linearGradient x1="59.7528456%" y1="27.3752585%" x2="59.7528458%" y2="130.821243%" id="linearGradient-27">
<stop stop-color="#311793" offset="0%"></stop>
<stop stop-color="#5640A6" offset="100%"></stop>
</linearGradient>
@@ -133,10 +117,9 @@
<g id="Header">
<g id="Group-23" transform="translate(966.000000, 402.000000)">
<g id="Group">
<g id="Group-8" transform="translate(404.000000, 178.000000) scale(-1, 1) translate(-404.000000, -178.000000) translate(290.000000, 0.000000)" fill="#DFDBED">
<path d="M141.442928,97.8575371 C142.065874,95.1631083 142.687203,92.7886854 143.306887,90.7343738 L157.202332,44.669588 L156.557407,44.0651466 L142.661962,90.1299324 C136.761005,109.692192 130.758544,157.639673 124.630903,234.060865 L125.354138,234.241042 C130.713832,167.397337 135.9792,122.369808 141.134298,99.2180399 L141.411832,99.7263844 L154.875801,75.1220412 L154.380587,74.2149837 L141.442928,97.8575371 Z M121.904368,241.305063 C106.079665,211.879592 98.3141945,164.412758 111.107939,135.167787 C121.927402,110.435788 131.274848,64.568892 139.859355,32.8577923 C140.98594,28.696193 141.910995,48.3465369 143.012904,44.7523 C148.407449,27.1562251 153.713872,-6.25307407 158.743437,1.01979593 C162.014685,5.75009585 164.657856,13.7058666 166.672952,24.8871083 C167.30469,28.3924548 163.485257,42.0002026 164.001569,47.8329803 C164.501381,53.4793663 169.340567,51.2775955 169.732213,59.105039 C170.250873,69.4709833 170.815447,89.3231588 171.425938,118.661566 L158.593469,155.418728 L172.12002,124.684911 C172.574964,129.326806 172.271802,135.523013 171.210535,143.273533 C170.149267,151.024053 168.25095,159.464366 165.515584,168.594471 L151.130008,210.29831 L165.615971,174.349871 C162.569077,196.158933 158.575141,212.399678 153.634162,223.072105 C148.693183,233.744533 134.805056,234.481587 127.177084,241.305063 L118.159826,326.074767 L121.904368,241.305063 Z M128.705542,205.250814 L142.079883,177.054598 L141.49504,176.260586 L128.120699,204.456803 L128.705542,205.250814 Z" id="Combined-Shape-Copy-2" opacity="0.528306159"></path>
<path d="M119.765738,253.661318 C117.218965,241.996753 120.219899,229.635702 117.172427,221.668204 C107.188223,195.564886 92.1297898,186.560748 108.940641,150.274915 C130.882657,102.913582 135.38861,102.337329 125.867341,84.4627285 C116.346072,66.5881285 110.065219,28.5865418 122.916359,28.5865418 C135.767499,28.5865418 153.023008,74.1867459 147.844974,99.6557136 C142.66694,125.124681 172.077289,149.5737 168.747763,200.881367 C166.528079,235.086478 164.179451,263.469382 161.701879,286.03008 C154.576713,296.690766 150.609104,303.984386 149.799051,307.910939 C143.007459,340.831687 146.102749,354.661309 142.91589,354.661309 C139.780028,354.661309 149.326499,340.470379 143.507299,308.59483 C142.354623,302.280868 130.656317,303.541623 119.765738,253.661318 Z M143.735952,283.277414 C145.602122,155.710847 142.159825,82.334616 133.331405,62.7946428 L132.590944,63.583693 C141.254438,82.7586337 144.694983,156.097538 142.834925,283.246326 L143.735952,283.277414 Z" id="Combined-Shape" transform="translate(135.195890, 191.623926) rotate(-22.000000) translate(-135.195890, -191.623926) "></path>
<path d="M77.343352,133.224017 L78.0535593,133.426432 L86.3611502,108.199621 L85.3626187,107.915031 L77.26257,132.51162 C77.0352812,130.417475 76.9216346,128.525519 76.9216346,126.835835 L76.9216346,88.2016763 L75.8917625,88.2016763 L75.8917625,126.835835 C75.8917625,136.428099 79.4922407,152.385635 86.6939475,174.722906 L60.3910314,146.182132 L59.6060482,146.787444 L87.4243775,176.972563 C92.4632428,192.385702 99.1534238,210.72442 107.495154,231.993207 L108.463191,231.667818 C100.1846,210.560014 93.5354517,192.342159 88.5159766,177.018671 L88.6876808,176.886267 L88.3543726,176.524601 C82.196569,157.670649 78.5260848,143.234345 77.343352,133.224017 Z M97.562166,241.904216 C80.1979223,196.95491 40.1913717,177.393109 44.2244374,155.750435 C51.7381899,115.429321 50.95722,65.3975228 75.6810831,69.9357969 C92.1636585,72.961313 107.613161,92.1076344 122.029592,127.374761 L105.441092,153.527126 L125.133825,130.867353 C127.426777,133.608005 129.35642,137.825289 130.922753,143.519206 C132.489086,149.213122 133.272252,155.869692 133.272252,163.488916 L123.757741,179.896774 L135.539174,167.171669 C139.871354,183.230899 140.954399,196.24887 138.788309,206.225582 C137.813136,210.717098 119.603851,220.407053 112.78922,235.554665 C107.241044,247.887193 107.241044,275.968846 112.78922,319.799625 C105.439571,275.121922 100.363887,249.156786 97.562166,241.904216 Z M101.409459,209.960634 L107.299926,183.466078 L106.210801,183.289624 L100.320334,209.78418 L101.409459,209.960634 Z" id="Combined-Shape" opacity="0.628509964" transform="translate(91.906013, 194.723778) rotate(-22.000000) translate(-91.906013, -194.723778) "></path>
<g id="Group-8" transform="translate(426.000000, 164.500000) scale(-1, 1) translate(-426.000000, -164.500000) translate(334.000000, 0.000000)">
<path d="M141.442928,97.8575371 C142.065874,95.1631083 142.687203,92.7886854 143.306887,90.7343738 L157.202332,44.669588 L156.557407,44.0651466 L142.661962,90.1299324 C136.761005,109.692192 130.758544,157.639673 124.630903,234.060865 L125.354138,234.241042 C130.713832,167.397337 135.9792,122.369808 141.134298,99.2180399 L141.411832,99.7263844 L154.875801,75.1220412 L154.380587,74.2149837 L141.442928,97.8575371 Z M121.904368,241.305063 C106.079665,211.879592 98.3141945,164.412758 111.107939,135.167787 C121.927402,110.435788 131.274848,64.568892 139.859355,32.8577923 C140.98594,28.696193 141.910995,48.3465369 143.012904,44.7523 C148.407449,27.1562251 153.713872,-6.25307407 158.743437,1.01979593 C162.014685,5.75009585 164.657856,13.7058666 166.672952,24.8871083 C167.30469,28.3924548 163.485257,42.0002026 164.001569,47.8329803 C164.501381,53.4793663 169.340567,51.2775955 169.732213,59.105039 C170.250873,69.4709833 170.815447,89.3231588 171.425938,118.661566 L158.593469,155.418728 L172.12002,124.684911 C172.574964,129.326806 172.271802,135.523013 171.210535,143.273533 C170.149267,151.024053 168.25095,159.464366 165.515584,168.594471 L151.130008,210.29831 L165.615971,174.349871 C162.569077,196.158933 158.575141,212.399678 153.634162,223.072105 C148.693183,233.744533 134.805056,234.481587 127.177084,241.305063 L118.159826,326.074767 L121.904368,241.305063 Z M128.705542,205.250814 L142.079883,177.054598 L141.49504,176.260586 L128.120699,204.456803 L128.705542,205.250814 Z" id="Combined-Shape-Copy-2" fill="#18AAB2" opacity="0.528306159"></path>
<path d="M77.343352,133.224017 L78.0535593,133.426432 L86.3611502,108.199621 L85.3626187,107.915031 L77.26257,132.51162 C77.0352812,130.417475 76.9216346,128.525519 76.9216346,126.835835 L76.9216346,88.2016763 L75.8917625,88.2016763 L75.8917625,126.835835 C75.8917625,136.428099 79.4922407,152.385635 86.6939475,174.722906 L60.3910314,146.182132 L59.6060482,146.787444 L87.4243775,176.972563 C92.4632428,192.385702 99.1534238,210.72442 107.495154,231.993207 L108.463191,231.667818 C100.1846,210.560014 93.5354517,192.342159 88.5159766,177.018671 L88.6876808,176.886267 L88.3543726,176.524601 C82.196569,157.670649 78.5260848,143.234345 77.343352,133.224017 Z M97.562166,241.904216 C80.1979223,196.95491 40.1913717,177.393109 44.2244374,155.750435 C51.7381899,115.429321 50.95722,65.3975228 75.6810831,69.9357969 C92.1636585,72.961313 107.613161,92.1076344 122.029592,127.374761 L105.441092,153.527126 L125.133825,130.867353 C127.426777,133.608005 129.35642,137.825289 130.922753,143.519206 C132.489086,149.213122 133.272252,155.869692 133.272252,163.488916 L123.757741,179.896774 L135.539174,167.171669 C139.871354,183.230899 140.954399,196.24887 138.788309,206.225582 C137.813136,210.717098 119.603851,220.407053 112.78922,235.554665 C107.241044,247.887193 107.241044,275.968846 112.78922,319.799625 C105.439571,275.121922 100.363887,249.156786 97.562166,241.904216 Z M101.409459,209.960634 L107.299926,183.466078 L106.210801,183.289624 L100.320334,209.78418 L101.409459,209.960634 Z" id="Combined-Shape" fill="#3BC2CA" transform="translate(91.906013, 194.723778) rotate(-22.000000) translate(-91.906013, -194.723778) "></path>
</g>
<g id="Group-11" transform="translate(150.000000, 58.000000)">
<path d="M506.702703,241.907713 L557.837838,102.568871 C558.612613,97.1501377 557.45045,93.2796143 554.351351,90.9573003 C551.252252,88.6349862 547.765766,87.0867769 543.891892,86.3126722 L434.648649,66.5730028 C430.774775,65.7988981 428.063063,66.1859504 426.513514,67.7341598 C424.963964,69.2823691 417.603604,81.6680441 404.432432,104.891185 L357.945946,194.300275 L506.702703,241.907713 Z" id="Path-18" fill="#B4AAD7"></path>
@@ -174,27 +157,24 @@
<path d="M553.238702,273.606102 L509.304544,292 L441,263.660013 L494.784486,246.076998 C495.239746,245.928166 495.733301,245.947658 496.175406,246.131931 L553.235778,269.915202 C554.255329,270.34016 554.737342,271.511166 554.312384,272.530717 C554.109914,273.016479 553.724142,273.402863 553.238702,273.606102 Z" id="Path-27" fill="#270D4F" opacity="0.400305707" filter="url(#filter-19)"></path>
<path d="M398.566038,259.324324 L380.70349,174.346715 C380.476271,173.265768 381.168355,172.205291 382.249302,171.978073 C382.585456,171.907412 382.934145,171.924522 383.261767,172.027752 L482.151008,203.186827 C482.843857,203.405137 483.363857,203.98196 483.509403,204.693659 L503,300 L398.566038,259.324324 Z" id="Path-28" fill="url(#linearGradient-20)"></path>
<path d="M432.5,248.560055 C439.955844,250.29403 446,246.74794 446,240.63964 C446,234.531341 439.955844,228.173921 432.5,226.439945 C425.044156,224.70597 419,228.25206 419,234.36036 C419,240.468659 425.044156,246.826079 432.5,248.560055 Z" id="Oval-2" fill="#D1CAE7"></path>
<polygon id="Path-31" fill="url(#linearGradient-21)" opacity="0.214051178" points="503 300.645161 405.378378 332 288 278.580645 398.405405 260"></polygon>
<polygon id="Path-31" fill-opacity="0.47" fill="url(#linearGradient-21)" opacity="0.214051178" points="503 300.645161 405.378378 332 288 278.580645 398.405405 260"></polygon>
<polygon id="Path-29" fill="url(#linearGradient-22)" points="345 324.711111 414.642857 312 475 348.977778 389.107143 364"></polygon>
<polygon id="Path-30" fill="url(#linearGradient-23)" points="388 304.631579 461.181818 300 503 334.736842 410.070707 344"></polygon>
<g id="Group-13" transform="translate(450.000000, 218.000000)">
<path d="M87.7132353,185.05012 C85.5833333,190.042105 85.7223685,209.102762 77.2027606,206.60677 C68.6831528,204.110777 64.2860232,183.943196 62.8643791,178.810138 C61.9166164,175.388099 60.7333375,164.98813 59.3145425,147.61023 C62.3347878,144.513281 65.2881149,142.239746 68.1745236,140.789624 C65.7774861,138.915623 63.3441285,136.781861 62.3430446,134.79749 C60.6040207,131.350357 59.1983173,126.10469 58.1259345,119.060488 L63.2244052,130.671627 L58.1612668,117.201526 C57.1985289,114.252555 56.5303984,111.526382 56.1568753,109.023009 C55.7833522,106.519635 55.6766516,104.518296 55.8367735,103.01899 L60.59757,112.945837 L56.0810622,101.073484 C56.29593,91.597347 56.4946374,85.1852082 56.6771845,81.8370676 C56.8150279,79.3088482 58.5182248,80.0200076 58.6941384,78.1962573 C58.8758592,76.3123035 57.5315742,71.917079 57.7539201,70.7848722 C58.463152,67.1733952 59.3934411,64.6037269 60.5447872,63.0758671 C62.3149901,60.7267718 64.1826353,71.5177839 66.0812959,77.2012152 C66.4691231,78.3621331 66.7947049,72.0151847 67.1912174,73.3593574 C70.212615,83.6018608 73.5025363,98.4166051 77.310548,106.404899 C78.5653867,109.03725 79.3685204,112.244904 79.7537191,115.708478 C80.8630066,111.802023 81.9025597,107.640654 82.895381,104.275001 C83.1413921,103.441026 83.3433952,107.378909 83.5840176,106.658633 C84.7620173,103.13242 85.9207739,96.4372748 87.0190737,97.894741 C87.7334117,98.8426821 88.3105977,100.437 88.7506315,102.677695 C88.8885832,103.380158 88.0545388,106.107119 88.1672851,107.275994 C88.2764285,108.407516 89.3331552,107.966287 89.4186784,109.534888 C89.5319374,111.612199 89.6552229,115.590529 89.7885348,121.469877 L86.9863253,128.835926 L89.9401007,122.676941 C90.0394462,123.607166 89.9732452,124.848872 89.7414976,126.402058 C89.5097499,127.955244 89.0952169,129.646663 88.4978985,131.476315 L85.356539,139.833667 L88.51982,132.629683 C87.8901486,136.76583 87.0752553,139.902554 86.07514,142.039855 C88.6010996,143.435298 91.2770333,145.292089 94.1029412,147.61023 C91.2630719,169.242166 89.1331699,181.72213 87.7132353,185.05012 Z M83.188043,132.967487 L83.0672349,132.80883 L80.4793867,138.086383 C81.4351782,128.183527 82.376389,121.351518 83.3010238,117.597357 L86.2774844,112.714474 L86.1678837,112.534259 L83.4624843,116.972465 C83.5424292,116.678274 83.6222488,116.40719 83.7019418,116.15922 L86.6894099,106.863498 L86.5507536,106.741524 L83.5632854,116.037246 C82.294602,119.984845 81.0040957,129.660488 79.6866761,145.082032 L79.8421688,145.118391 C80.0390482,142.813747 80.2353355,140.637616 80.4310138,138.59006 L83.188043,132.967487 Z M71.0852365,127.855413 L66.9142291,119.34923 L66.7195146,119.604948 L71.1632022,128.667224 C71.4785899,131.967406 71.7949594,135.474821 72.112283,139.18937 L72.3629009,139.130768 C70.2395279,114.274838 68.1595329,98.6799594 66.1147114,92.3173505 L61.2996099,77.3348169 L61.0761283,77.531411 L65.8912297,92.5139445 C66.0196762,92.913615 66.1483268,93.3505381 66.2771793,93.8247063 L61.9167068,86.6713532 L61.7400561,86.9618186 L66.5374159,94.8318852 C68.0277102,100.882709 69.544723,111.894314 71.0852365,127.855413 Z" id="Combined-Shape" fill="url(#linearGradient-24)" opacity="0.834295743" transform="translate(74.933824, 134.788732) rotate(-99.000000) translate(-74.933824, -134.788732) "></path>
<g id="Group-12" transform="translate(90.617647, 0.000000)">
<path d="M6.23910675,84.9774116 C16.2216776,79.1456285 25.7883079,76.2297369 34.9389978,76.2297369 C44.0896877,76.2297369 54.9041394,79.1456285 67.3823529,84.9774116 C61.5591866,99.9734255 56.1519608,108.7211 51.1606754,111.220436 C43.6737473,114.969439 35.6432246,118.177384 22.4607843,109.970768 C13.6724908,104.499691 8.26526494,96.1685721 6.23910675,84.9774116 Z" id="Path-33" fill="url(#linearGradient-25)"></path>
<path d="M15.5724513,66.0090349 L23.3825689,56.9346217 L23.0403434,56.6785615 L15.709482,65.1961369 C18.4170511,49.2136606 21.083316,38.1873068 23.7026242,32.1283721 L32.1343445,24.2477721 L31.8238675,23.9569177 L24.1600067,31.1198515 C24.3864748,30.6450482 24.6125879,30.20754 24.8383423,29.8073342 L33.3012479,14.804734 L32.9084619,14.6078767 L24.4455564,29.6104768 C20.8516276,35.9816074 17.1958788,51.5973728 13.46389,76.4865927 L13.9043699,76.5452737 C14.4620902,72.8257493 15.0181335,69.3136375 15.5724513,66.0090349 Z M8.95170002,79.5690377 C-0.837386558,70.05205 -3.14612464,53.1755026 4.7680254,43.7168935 C11.4608943,35.7179005 17.2431804,20.8833142 22.5535155,10.6270927 C23.2504162,9.28111968 23.8226508,15.6365688 24.5042865,14.474096 C27.8413264,8.78305272 31.1238544,-2.02241213 34.2351201,0.329829398 C36.2586981,1.85973546 37.8937516,4.43284546 39.1402804,8.04915938 C39.5310702,9.18288261 37.1683875,13.5839938 37.4877755,15.4704708 C37.7969571,17.2966637 40.7904546,16.5845519 41.0327248,19.1161574 C41.3535651,22.4687822 41.7028085,28.8895091 42.0804549,38.3783379 L34.1423504,50.2665916 L42.5098108,40.3264496 C42.7912371,41.8277632 42.6037027,43.8317831 41.9472076,46.3385095 C41.2907125,48.8452358 40.1164225,51.5750597 38.4243378,54.5279809 L29.5254885,68.0161227 L38.486437,56.3894319 C36.6016429,63.4430685 34.1310127,68.6957617 31.0745465,72.1475114 C28.0180803,75.599261 17.3651718,79.5024232 12.6465445,81.7093188 L1.797951,118.525957 L8.95170002,79.5690377 Z" id="Combined-Shape-Copy" fill="#3BC2CA" transform="translate(21.318238, 59.262978) scale(-1, 1) translate(-21.318238, -59.262978) "></path>
<path d="M43.3529049,75.9451611 L48.1985926,70.3150574 L47.9862631,70.1561881 L43.4379238,75.4408089 C45.1178005,65.5246857 46.7720505,58.6835254 48.3971668,54.9243368 L53.6285198,50.0349193 L53.4358884,49.8544624 L48.6809439,54.2986131 C48.8214531,54.0040275 48.9617421,53.7325811 49.1018085,53.4842785 L54.3525102,44.176107 L54.1088111,44.0539693 L48.8581095,53.3621409 C46.6283023,57.3150274 44.3601397,67.0036295 42.044675,82.4458279 L42.3179651,82.4822358 C42.6639955,80.1745044 43.0089855,77.9954595 43.3529049,75.9451611 Z M39.2451444,84.3582915 C33.1716307,78.4535981 31.7392036,67.98276 36.6494369,62.1142868 C40.8019419,57.1514138 44.3894874,47.9474843 47.684217,41.5841428 C48.1166001,40.749051 48.4716358,44.6922082 48.8945479,43.9709668 C50.9649716,40.4400317 53.0015742,33.7359191 54.9319192,35.1953373 C56.1874224,36.144548 57.2018704,37.7410012 57.9752633,39.984697 C58.2177238,40.6881011 56.7518275,43.4187143 56.9499877,44.5891548 C57.1418155,45.7221929 58.9990928,45.2803722 59.1494062,46.8510745 C59.3484675,48.9311677 59.5651511,52.9148256 59.799457,58.8020482 L54.8743615,66.1779633 L60.0658454,60.0107292 C60.2404527,60.9422 60.1240994,62.1855686 59.7167854,63.740835 C59.3094714,65.2961013 58.5808982,66.9897856 57.5310658,68.8218879 L52.0098885,77.1904331 L57.5695945,69.9768014 C56.400198,74.35314 54.8673271,77.6121064 52.9709817,79.7537003 C51.0746363,81.8952943 44.4651754,84.3169614 41.5375634,85.6862016 L34.8066922,108.528614 L39.2451444,84.3582915 Z" id="Combined-Shape-Copy" fill="#6CD5DB"></path>
<path d="M8.73474946,92.3365355 C17.0535585,89.0966767 25.7883079,87.4767473 34.9389978,87.4767473 C44.0896877,87.4767473 53.6563181,89.0966767 63.6388889,92.3365355 C60.3113653,103.824893 56.1519608,110.452764 51.1606754,112.22015 C43.6737473,114.871229 35.6432246,117.139702 22.4607843,111.336457 C13.6724908,107.467627 9.09714584,101.13432 8.73474946,92.3365355 Z" id="Path-33" fill="url(#linearGradient-26)" opacity="0.650701993"></path>
<path d="M6.23910675,84.9774116 C19.5492012,96.6409779 32.8592956,99.9734255 46.16939,94.9747542 C59.4794844,89.9760829 66.550472,86.6436354 67.3823529,84.9774116 C62.3910675,106.63832 58.6476035,119.134999 56.1519608,122.467446 C52.4084967,127.466117 48.6650327,133.714457 33.6911765,131.215121 C18.7173203,128.715785 14.9768607,121.35904 12.4782135,116.219107 C10.8124487,112.792485 8.73274647,102.378587 6.23910675,84.9774116 Z" id="Path-32" fill="url(#linearGradient-27)"></path>
</g>
<path d="M121.985294,84.0492958 C123.017974,88.1807512 123.534314,90.2464789 123.534314,90.2464789 C123.534314,90.2464789 123.534314,91.7957746 125.083333,91.7957746 C126.116013,91.7957746 126.632353,91.2793427 126.632353,90.2464789 L125.083333,82.5 L121.985294,84.0492958 Z" id="Path-34" fill="#7CCBC7"></path>
<path d="M128.955882,86.2572473 C128.955882,87.1508664 128.955882,88.0444856 128.955882,88.9381047 C128.955882,90.2785334 130.934771,91.2173527 130.934771,90.2120312 C130.934771,89.5418169 131.049651,88.1331116 131.279412,85.9859155 L128.955882,86.2572473 Z" id="Path-35" fill="#8FD7D4" transform="translate(130.117647, 88.309859) rotate(11.000000) translate(-130.117647, -88.309859) "></path>
</g>
<g id="Group-15" transform="translate(185.000000, 278.000000)">
<path d="M34.2130653,31.1298325 C29.0641265,37.4689354 24.08172,42.4873699 21.7563203,42.9057866 C19.7288311,43.2705994 19.1453116,42.563243 19.8549798,41.0043263 C19.5204419,41.2106313 19.1821386,41.4181997 18.8400698,41.6270315 L18.7221987,41.4952519 C14.9774061,44.1969017 8.30033566,42.3160411 3.80854437,37.2942322 C-0.68324693,32.2724233 -1.28880905,26.0113229 2.45598351,23.3096731 C2.79549409,23.064736 3.15910685,22.8574653 3.54300815,22.6867868 C17.2223285,12.0869549 26.3179298,7.27803449 30.8298119,8.26002566 C37.756219,9.76752752 41.9995795,14.5115916 42.1454399,20.9108631 C42.2024233,23.4108727 39.5582984,26.8171958 34.2130653,31.1298325 Z M30.109971,34.2394874 C27.8145463,35.887945 25.1908057,37.6465637 22.2387493,39.5153435 C21.0259074,41.1902139 21.1911947,41.7093211 22.4548781,41.4819425 C23.7286402,41.2527503 26.3669703,38.8138303 30.109971,34.2394874 Z" id="Combined-Shape" fill="url(#linearGradient-28)" opacity="0.655117754"></path>
<path d="M34.2130653,31.1298325 C29.0641265,37.4689354 24.08172,42.4873699 21.7563203,42.9057866 C19.7288311,43.2705994 19.1453116,42.563243 19.8549798,41.0043263 C19.5204419,41.2106313 19.1821386,41.4181997 18.8400698,41.6270315 L18.7221987,41.4952519 C14.9774061,44.1969017 8.30033566,42.3160411 3.80854437,37.2942322 C-0.68324693,32.2724233 -1.28880905,26.0113229 2.45598351,23.3096731 C2.79549409,23.064736 3.15910685,22.8574653 3.54300815,22.6867868 C17.2223285,12.0869549 26.3179298,7.27803449 30.8298119,8.26002566 C37.756219,9.76752752 41.9995795,14.5115916 42.1454399,20.9108631 C42.2024233,23.4108727 39.5582984,26.8171958 34.2130653,31.1298325 Z M30.109971,34.2394874 C27.8145463,35.887945 25.1908057,37.6465637 22.2387493,39.5153435 C21.0259074,41.1902139 21.1911947,41.7093211 22.4548781,41.4819425 C23.7286402,41.2527503 26.3669703,38.8138303 30.109971,34.2394874 Z" id="Combined-Shape" fill-opacity="0.47" fill="url(#linearGradient-24)" opacity="0.655117754"></path>
<g id="Group-14" transform="translate(8.195122, 0.000000)">
<path d="M0.292682927,5.75546976 C-0.682926829,18.2256542 1.26829268,25.4199914 6.14634146,27.3384813 C13.4634146,30.2162162 22.2439024,30.2162162 29.5609756,27.3384813 C34.4390244,25.4199914 35.902439,18.2256542 33.9512195,5.75546976 L0.292682927,5.75546976 Z" id="Path-36" fill="url(#linearGradient-29)"></path>
<ellipse id="Oval-4" fill="url(#linearGradient-30)" cx="17.1219512" cy="5.75546976" rx="16.8292683" ry="5.75546976"></ellipse>
<path d="M17.1219512,11.5109395 C26.4164994,11.5109395 31.6097561,10.2225337 31.6097561,8.63320463 C31.6097561,7.04387555 26.4164994,4.64864865 17.1219512,4.64864865 C7.82740299,4.64864865 2.34146341,6.54580605 2.34146341,8.13513514 C2.34146341,9.72446422 7.82740299,11.5109395 17.1219512,11.5109395 Z" id="Oval-4" fill="url(#linearGradient-31)"></path>
<path d="M0.292682927,5.75546976 C-0.682926829,18.2256542 1.26829268,25.4199914 6.14634146,27.3384813 C13.4634146,30.2162162 22.2439024,30.2162162 29.5609756,27.3384813 C34.4390244,25.4199914 35.902439,18.2256542 33.9512195,5.75546976 L0.292682927,5.75546976 Z" id="Path-36" fill="url(#linearGradient-25)"></path>
<ellipse id="Oval-4" fill="url(#linearGradient-26)" cx="17.1219512" cy="5.75546976" rx="16.8292683" ry="5.75546976"></ellipse>
<path d="M17.1219512,11.5109395 C26.4164994,11.5109395 31.6097561,10.2225337 31.6097561,8.63320463 C31.6097561,7.04387555 26.4164994,4.64864865 17.1219512,4.64864865 C7.82740299,4.64864865 2.34146341,6.54580605 2.34146341,8.13513514 C2.34146341,9.72446422 7.82740299,11.5109395 17.1219512,11.5109395 Z" id="Oval-4" fill="url(#linearGradient-27)"></path>
<path d="M34.6056784,10.2423529 L33.2967606,9.5988718 C34.8725622,6.50013332 36.7881507,5.55840504 38.6277932,7.36718952 C40.3895443,9.09938915 37.4825134,16.2353273 33.1152387,23.3920246 L33.3237857,19.7739985 C37.2748678,13.2993202 38.6040373,9.37869796 37.5930027,8.38462244 C36.6598596,7.46713177 35.8026624,7.88854107 34.6056784,10.2423529 Z" id="Path-37" fill="#5640A6" fill-rule="nonzero"></path>
</g>
</g>
<g id="Group-15" transform="translate(560.000000, 283.000000)">
<path d="M34.2130653,31.1298325 C29.0641265,37.4689354 24.08172,42.4873699 21.7563203,42.9057866 C19.7288311,43.2705994 19.1453116,42.563243 19.8549798,41.0043263 C19.5204419,41.2106313 19.1821386,41.4181997 18.8400698,41.6270315 L18.7221987,41.4952519 C14.9774061,44.1969017 8.30033566,42.3160411 3.80854437,37.2942322 C-0.68324693,32.2724233 -1.28880905,26.0113229 2.45598351,23.3096731 C2.79549409,23.064736 3.15910685,22.8574653 3.54300815,22.6867868 C17.2223285,12.0869549 26.3179298,7.27803449 30.8298119,8.26002566 C37.756219,9.76752752 41.9995795,14.5115916 42.1454399,20.9108631 C42.2024233,23.4108727 39.5582984,26.8171958 34.2130653,31.1298325 Z M30.109971,34.2394874 C27.8145463,35.887945 25.1908057,37.6465637 22.2387493,39.5153435 C21.0259074,41.1902139 21.1911947,41.7093211 22.4548781,41.4819425 C23.7286402,41.2527503 26.3669703,38.8138303 30.109971,34.2394874 Z" id="Combined-Shape" fill-opacity="0.47" fill="url(#linearGradient-24)" opacity="0.655117754"></path>
<g id="Group-14" transform="translate(8.195122, 0.000000)">
<path d="M0.292682927,5.75546976 C-0.682926829,18.2256542 1.26829268,25.4199914 6.14634146,27.3384813 C13.4634146,30.2162162 22.2439024,30.2162162 29.5609756,27.3384813 C34.4390244,25.4199914 35.902439,18.2256542 33.9512195,5.75546976 L0.292682927,5.75546976 Z" id="Path-36" fill="url(#linearGradient-25)"></path>
<ellipse id="Oval-4" fill="url(#linearGradient-26)" cx="17.1219512" cy="5.75546976" rx="16.8292683" ry="5.75546976"></ellipse>
<path d="M17.1219512,11.5109395 C26.4164994,11.5109395 31.6097561,10.2225337 31.6097561,8.63320463 C31.6097561,7.04387555 26.4164994,4.64864865 17.1219512,4.64864865 C7.82740299,4.64864865 2.34146341,6.54580605 2.34146341,8.13513514 C2.34146341,9.72446422 7.82740299,11.5109395 17.1219512,11.5109395 Z" id="Oval-4" fill="url(#linearGradient-27)"></path>
<path d="M34.6056784,10.2423529 L33.2967606,9.5988718 C34.8725622,6.50013332 36.7881507,5.55840504 38.6277932,7.36718952 C40.3895443,9.09938915 37.4825134,16.2353273 33.1152387,23.3920246 L33.3237857,19.7739985 C37.2748678,13.2993202 38.6040373,9.37869796 37.5930027,8.38462244 C36.6598596,7.46713177 35.8026624,7.88854107 34.6056784,10.2423529 Z" id="Path-37" fill="#5640A6" fill-rule="nonzero"></path>
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 37 KiB

18
src/pages/services.js
View File

@@ -7,30 +7,26 @@ import WorkStyle from '../components/WorkStyle'
import Technologies from '../components/Technologies'
import FullstackDev from '../images/fullstack-web-development.svg'
import WebdevServices from '../images/web-development-services.svg'
import WebdevServices from '../images/web-development-services-agency.svg'
import UXdesign from '../images/ux-ui-design-services.svg'
import HowWeWork from '../images/how-we-work.svg'
const ServicesPage = () => (
<div>
<PageIntro
button
buttonText="Let's Connect"
url="/contact"
buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
intro="What We Do"
headline="Agile Practitioners"
text="At Saburly we embrace Agile’s methodologies for every project and business environment, no matter the size, scale, or complexity. Our flexible processes ensure high productivity and we know how to balance between cost, time and quality."
sectionClasses="pt-10"
image={WebdevServices}
imgClasses="-mb-16 md:-mt-6"
imgClasses="-mb-20 lg:-mt-12"
/>
<section className="px-4 py-16">
<div className="container mx-auto">
<div className="lg:flex">
<img
src={UXdesign}
className="-mt-12"
className="hidden lg:block -mt-12"
alt="User Experience Design Agency"
/>
<SectionIntro
@@ -42,6 +38,12 @@ const ServicesPage = () => (
testing. All devices and screen sizes are welcome
here."
>
<img
src={UXdesign}
className="lg:hidden p-8 mx-auto w-full -mt-12"
alt="User Experience Design Agency"
/>
<div className="my-4">
<h3 className="font-medium text-black">
Conceptualization & Branding
@@ -75,7 +77,7 @@ const ServicesPage = () => (
<div className="lg:flex">
<img
src={FullstackDev}
className="w-full md:max-w-md mx-auto text-center content-center align-center p-8"
className="w-full mx-auto text-center content-center align-center p-8"
alt="Fullstack Web Development Agency"
/>
<div>

150
src/styles/index.css
View File

@@ -3542,6 +3542,10 @@ table {
margin: -6rem;
}
.-m-28 {
margin: -7rem;
}
.-m-32 {
margin: -8rem;
}
@@ -3670,6 +3674,16 @@ table {
margin-right: -6rem;
}
.-my-28 {
margin-top: -7rem;
margin-bottom: -7rem;
}
.-mx-28 {
margin-left: -7rem;
margin-right: -7rem;
}
.-my-32 {
margin-top: -8rem;
margin-bottom: -8rem;
@@ -3882,6 +3896,22 @@ table {
margin-left: -6rem;
}
.-mt-28 {
margin-top: -7rem;
}
.-mr-28 {
margin-right: -7rem;
}
.-mb-28 {
margin-bottom: -7rem;
}
.-ml-28 {
margin-left: -7rem;
}
.-mt-32 {
margin-top: -8rem;
}
@@ -8642,6 +8672,10 @@ table {
margin: -6rem;
}
.sm\:-m-28 {
margin: -7rem;
}
.sm\:-m-32 {
margin: -8rem;
}
@@ -8770,6 +8804,16 @@ table {
margin-right: -6rem;
}
.sm\:-my-28 {
margin-top: -7rem;
margin-bottom: -7rem;
}
.sm\:-mx-28 {
margin-left: -7rem;
margin-right: -7rem;
}
.sm\:-my-32 {
margin-top: -8rem;
margin-bottom: -8rem;
@@ -8982,6 +9026,22 @@ table {
margin-left: -6rem;
}
.sm\:-mt-28 {
margin-top: -7rem;
}
.sm\:-mr-28 {
margin-right: -7rem;
}
.sm\:-mb-28 {
margin-bottom: -7rem;
}
.sm\:-ml-28 {
margin-left: -7rem;
}
.sm\:-mt-32 {
margin-top: -8rem;
}
@@ -13727,6 +13787,10 @@ table {
margin: -6rem;
}
.md\:-m-28 {
margin: -7rem;
}
.md\:-m-32 {
margin: -8rem;
}
@@ -13855,6 +13919,16 @@ table {
margin-right: -6rem;
}
.md\:-my-28 {
margin-top: -7rem;
margin-bottom: -7rem;
}
.md\:-mx-28 {
margin-left: -7rem;
margin-right: -7rem;
}
.md\:-my-32 {
margin-top: -8rem;
margin-bottom: -8rem;
@@ -14067,6 +14141,22 @@ table {
margin-left: -6rem;
}
.md\:-mt-28 {
margin-top: -7rem;
}
.md\:-mr-28 {
margin-right: -7rem;
}
.md\:-mb-28 {
margin-bottom: -7rem;
}
.md\:-ml-28 {
margin-left: -7rem;
}
.md\:-mt-32 {
margin-top: -8rem;
}
@@ -18812,6 +18902,10 @@ table {
margin: -6rem;
}
.lg\:-m-28 {
margin: -7rem;
}
.lg\:-m-32 {
margin: -8rem;
}
@@ -18940,6 +19034,16 @@ table {
margin-right: -6rem;
}
.lg\:-my-28 {
margin-top: -7rem;
margin-bottom: -7rem;
}
.lg\:-mx-28 {
margin-left: -7rem;
margin-right: -7rem;
}
.lg\:-my-32 {
margin-top: -8rem;
margin-bottom: -8rem;
@@ -19152,6 +19256,22 @@ table {
margin-left: -6rem;
}
.lg\:-mt-28 {
margin-top: -7rem;
}
.lg\:-mr-28 {
margin-right: -7rem;
}
.lg\:-mb-28 {
margin-bottom: -7rem;
}
.lg\:-ml-28 {
margin-left: -7rem;
}
.lg\:-mt-32 {
margin-top: -8rem;
}
@@ -23897,6 +24017,10 @@ table {
margin: -6rem;
}
.xl\:-m-28 {
margin: -7rem;
}
.xl\:-m-32 {
margin: -8rem;
}
@@ -24025,6 +24149,16 @@ table {
margin-right: -6rem;
}
.xl\:-my-28 {
margin-top: -7rem;
margin-bottom: -7rem;
}
.xl\:-mx-28 {
margin-left: -7rem;
margin-right: -7rem;
}
.xl\:-my-32 {
margin-top: -8rem;
margin-bottom: -8rem;
@@ -24237,6 +24371,22 @@ table {
margin-left: -6rem;
}
.xl\:-mt-28 {
margin-top: -7rem;
}
.xl\:-mr-28 {
margin-right: -7rem;
}
.xl\:-mb-28 {
margin-bottom: -7rem;
}
.xl\:-ml-28 {
margin-left: -7rem;
}
.xl\:-mt-32 {
margin-top: -8rem;
}

1
tailwind.config.js
View File

@@ -712,6 +712,7 @@ module.exports = {
'16': '4rem',
'20': '5rem',
'24': '6rem',
'28': '7rem',
'32': '8rem',
},