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

Stylistic changes and new illustrations

Browse Source
This commit is contained in:
Moris Zen
2018-08-01 19:10:21 +02:00
parent 5a0d23a0ed
commit ef9e0536b6
14 changed files with 1214 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Footer.js
View File

@@ -2,7 +2,7 @@ import React from 'react'
import Link from 'gatsby-link'
import Button from './Button'
import LogoSaburly from '../images/logo-saburly-white.svg'
import LogoSaburly from '../images/logo-saburly-colorful.svg'
import Facebook from '../images/facebook.svg'
import Instagram from '../images/instagram.svg'
@@ -13,7 +13,7 @@ let menuClasses =
'no-underline mt-4 lg:inline-block lg:mt-0 text-white hover:opacity-100 uppercase mr-4'
const Footer = () => (
<footer className="bg-indigo-darker">
<footer className="bg-saburly-dark">
<div className="container mx-auto py-10 lg:flex">
<div className="lg:w-1/4 p-4">
<img

6
src/components/Header.js
View File

@@ -6,7 +6,7 @@ import Button from './Button'
import './Header.css'
let menuClasses =
'no-underline mt-4 lg:inline-block opacity-80 text-black lg:mt-0 hover:opacity-100 uppercase mr-4'
'no-underline mt-4 lg:inline-block opacity-80 text-black font-medium lg:mt-0 hover:opacity-100 uppercase mr-4'
class Header extends Component {
render() {
@@ -29,7 +29,7 @@ class Header extends Component {
</div>
<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">
<ul className="list-reset font- text-sm">
{!isHome && (
<Link to="/">
<li className={menuClasses}>Home</li>
@@ -48,7 +48,7 @@ class Header extends Component {
<Button
text="Contact"
standard
classes="rounded-full font-normal text-black hover:shadow"
classes="rounded-full font-medium text-black hover:shadow"
url="/contact"
/>
</ul>

2
src/components/Service.js
View File

@@ -13,7 +13,7 @@ const Service = ({ ...props }) => (
alt={`${props.title} agency`}
/>
<InfoBox
classes="bg-white p-8 shadow md:m-0 opacity-70 md:max-w-sm"
classes="bg-white md:m-0 opacity-70 md:max-w-sm"
headline={props.title}
text={props.text}
/>

10
src/components/SideMenu.js
View File

@@ -51,7 +51,7 @@ class SideMenu extends Component {
X
</button>
<Link to="/" className="side-close menu-home no-underline">
<li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-2 text-white">
<li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-4 text-white">
Home
</li>
</Link>
@@ -59,22 +59,22 @@ class SideMenu extends Component {
to="/services"
className="side-close menu-services no-underline"
>
<li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-2 text-white">
<li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-4 text-white">
Services
</li>
</Link>
<Link to="/about" className="side-close menu-about no-underline">
<li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-2 text-white">
<li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-4 text-white">
About Us
</li>
</Link>
<Link to="/blog" className="side-close menu-blog no-underline">
<li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-2 text-white">
<li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-4 text-white">
Blog
</li>
</Link>
<Link to="/contact" className="side-close menu-contact no-underline">
<li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-2 text-white">
<li className="hover:bg-indigo hover:opacity-100 opacity-80 text-right no-underline text-2xl uppercase p-4 text-white">
Contact
</li>
</Link>

213
src/images/fullstack-web-development.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 592 KiB

293
src/images/mobile-development.svg Normal file
View File

@@ -0,0 +1,293 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="592px" height="656px" viewBox="0 0 592 656" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
<title>Group 25</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="79.0834523%" y1="11.2786499%" x2="17.1352039%" y2="100%" id="linearGradient-1">
<stop stop-color="#B5AFCC" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
<linearGradient x1="62.5723088%" y1="6.85063844%" x2="60.1290094%" y2="78.9477907%" id="linearGradient-2">
<stop stop-color="#B4AAD7" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
<filter x="-36.9%" y="-474.8%" width="173.8%" height="1049.5%" filterUnits="objectBoundingBox" id="filter-3">
<feGaussianBlur stdDeviation="31.1272321 0" in="SourceGraphic"></feGaussianBlur>
</filter>
<linearGradient x1="154.2902%" y1="35.5906696%" x2="57.6239868%" y2="78.8475359%" id="linearGradient-4">
<stop stop-color="#B4AAD7" offset="0%"></stop>
<stop stop-color="#5640A6" offset="100%"></stop>
</linearGradient>
<linearGradient x1="104.045238%" y1="16.8405933%" x2="6.07416571%" y2="100%" id="linearGradient-5">
<stop stop-color="#B4AAD7" offset="0%"></stop>
<stop stop-color="#7B6ABA" offset="100%"></stop>
</linearGradient>
<linearGradient x1="15.7963008%" y1="121.63627%" x2="148.737665%" y2="121.636271%" id="linearGradient-6">
<stop stop-color="#B4AAD7" offset="0%"></stop>
<stop stop-color="#5640A6" offset="100%"></stop>
</linearGradient>
<linearGradient x1="17.57667%" y1="119.118825%" x2="88.7370862%" y2="18.4978525%" id="linearGradient-7">
<stop stop-color="#7B6ABA" offset="0%"></stop>
<stop stop-color="#5640A6" offset="100%"></stop>
</linearGradient>
<rect id="path-8" x="0" y="0" width="211.299948" height="319.093909" rx="12"></rect>
<filter x="-85.7%" y="-56.7%" width="271.3%" height="213.4%" filterUnits="objectBoundingBox" id="filter-10">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="81" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<linearGradient x1="55.1148219%" y1="227.006388%" x2="23.1723395%" y2="81.0265899%" id="linearGradient-11">
<stop stop-color="#F2EEFA" offset="0%"></stop>
<stop stop-color="#EDE9F5" offset="100%"></stop>
</linearGradient>
<filter x="-4.5%" y="-13.7%" width="117.8%" height="154.8%" filterUnits="objectBoundingBox" id="filter-12">
<feOffset dx="17" dy="17" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.976470588 0 0 0 0 0.290196078 0 0 0 0 0.541176471 0 0 0 0.0985337409 0" type="matrix" in="shadowOffsetOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<linearGradient x1="90.6083424%" y1="172.734811%" x2="32.9575052%" y2="50%" id="linearGradient-13">
<stop stop-color="#FED3E3" offset="0%"></stop>
<stop stop-color="#EF8DB1" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="120.386906%" x2="73.4192748%" y2="61.2141392%" id="linearGradient-14">
<stop stop-color="#7B6ABA" offset="0%"></stop>
<stop stop-color="#5640A6" offset="100%"></stop>
</linearGradient>
<path d="M3.09007669,6.68287288 C3.09007669,16.2221931 -4.36246025,34.915247 5.35568244,39.7616612 C11.8344442,42.992604 17.9384431,36.217535 23.6676789,19.4364542 C23.1738441,7.11394236 19.998386,0.952686423 14.1413046,0.952686423 C5.35568244,0.952686423 3.09007669,-2.85644738 3.09007669,6.68287288 Z" id="path-15"></path>
<linearGradient x1="-25.8029357%" y1="100%" x2="42.445841%" y2="30.4265738%" id="linearGradient-17">
<stop stop-color="#7B6ABA" offset="0%"></stop>
<stop stop-color="#5640A6" offset="100%"></stop>
</linearGradient>
<linearGradient x1="0%" y1="106.763463%" x2="28.5542338%" y2="0%" id="linearGradient-18">
<stop stop-color="#EDE9F5" offset="0%"></stop>
<stop stop-color="#B4AAD7" offset="100%"></stop>
</linearGradient>
<path d="M72.3901608,0.305250708 C85.1151221,49.4595794 92.3059443,79.6290681 93.9626273,90.8137167 C96.4476517,107.59069 102.528822,164.299847 101.6704,173.445527 C97.5165856,177.911124 90.0336977,175.237343 88.7302327,174.41828 C87.4267677,173.599217 79.3959964,126.941145 72.3901608,108.841199 C65.3843252,90.7412538 49.6185698,74.0829989 39.2301045,55.8722756 C39.2301045,63.7741399 36.5561443,78.2982133 31.2082238,99.4444959 C23.4100238,136.787909 18.184061,158.481935 15.5303354,164.526575 C13.6415416,167.743284 4.10653436,165.384518 0.408162072,164.526575 C0.408162072,156.030798 8.38225877,113.108895 8.38225877,98.2084645 C8.38225877,83.3080344 6.17696135,56.3042628 5.35304404,45.2341536 C4.52912674,34.1640445 2.51607373,12.6869751 5.35304404,0.305250708 C10.1474416,0.305250708 32.4931472,0.305250708 72.3901608,0.305250708 Z" id="path-19"></path>
<linearGradient x1="89.2651436%" y1="83.2202103%" x2="79.8543348%" y2="25.681003%" id="linearGradient-21">
<stop stop-color="#CFDDF3" stop-opacity="0.477723053" offset="0%"></stop>
<stop stop-color="#9383C6" offset="100%"></stop>
</linearGradient>
<path d="M23.4418565,0.516295258 C25.1611825,4.02789186 27.4770244,6.52910564 30.3893822,8.01993659 C33.30174,9.51076755 35.4856387,10.6209028 36.9410784,11.3503423 L35.083896,18.9451636 C37.3916069,26.3906976 38.0106677,31.3685767 36.9410784,33.8788009 C35.3366945,37.6441371 30.3893822,40.145689 27.5099177,43.5029603 C25.5902748,45.7411412 23.7430712,50.656675 21.968307,58.2495619 L2.98962667,58.2495619 L2.13027177,43.5029603 C-1.24407173,29.3170764 -0.0687801274,18.599537 5.65614657,11.3503423 C11.3810733,4.10114753 17.3096432,0.489798523 23.4418565,0.516295258 Z" id="path-22"></path>
<linearGradient x1="50%" y1="0%" x2="81.4402452%" y2="56.408967%" id="linearGradient-24">
<stop stop-color="#311793" offset="0%"></stop>
<stop stop-color="#270D4F" offset="100%"></stop>
</linearGradient>
<linearGradient x1="-1.11022302e-14%" y1="50%" x2="75.5130009%" y2="33.4689142%" id="linearGradient-25">
<stop stop-color="#B4AAD7" offset="0%"></stop>
<stop stop-color="#7B6ABA" offset="100%"></stop>
</linearGradient>
<path d="M42.3020054,0.872452651 C51.2963124,3.3748354 58.4434158,7.93227369 63.7433157,14.5447675 C71.6931655,24.4635082 69.9215485,54.3043045 72.173261,72.0645499 C74.4249735,89.8247954 84.2225109,102.734471 69.0889684,112.757251 C53.9554259,122.78003 11.1667568,120.504039 7.66749242,112.757251 C5.33464947,107.592726 2.8387295,89.1395917 0.179732513,57.3978492 C0.179732513,28.8291281 1.77293355,13.3406465 4.95933562,10.9324044 C8.14573769,8.52416231 13.4582251,4.9929079 20.896798,0.33864117 C20.7300097,1.04681619 22.4407396,1.75178915 26.0289879,2.45356007 C29.6172361,3.15533099 35.0415753,2.62829519 42.3020054,0.872452651 Z" id="path-26"></path>
<linearGradient x1="44.7356789%" y1="57.7816012%" x2="67.0663318%" y2="24.2549145%" id="linearGradient-28">
<stop stop-color="#C3BBDF" offset="0%"></stop>
<stop stop-color="#5640A6" offset="100%"></stop>
</linearGradient>
<linearGradient x1="86.2225509%" y1="231.608002%" x2="56.9641755%" y2="-57.1406441%" id="linearGradient-29">
<stop stop-color="#8778C0" offset="0%"></stop>
<stop stop-color="#5F4BAB" offset="100%"></stop>
</linearGradient>
<path d="M24.2611822,72.931305 L36.565533,82.4864437 C50.0662021,61.810529 57.4124675,50.0572856 58.6043292,47.2267135 C60.3921218,42.9808553 58.6043292,35.855613 58.6043292,33.4828814 C58.6043292,31.1101499 59.933104,25.8760451 61.8642468,24.3404258 C63.7953897,22.8048065 64.0224898,23.5942766 65.1938022,23.5942766 C66.3651146,23.5942766 76.4077757,10.5180654 77.5895511,8.85408988 C78.7713266,7.1901144 80.3702892,6.3716085 81.5695312,7.34472532 C82.7687732,8.31784214 82.2523432,9.93851208 81.3748464,11.2612533 C80.4973495,12.5839946 75.5716472,20.0068627 75.5716472,21.5244712 C75.5716472,23.0420796 80.3920768,26.2722834 81.6346929,27.6066513 C82.8773091,28.9410191 84.6379806,32.7173296 82.3219583,36.9021604 C80.0059359,41.0869912 72.3080158,47.752943 72.3080158,49.6010112 C72.3080158,51.4490793 59.5159876,79.4042419 54.8753028,90.7095637 C50.234618,102.014886 45.8580438,109.648347 36.565533,106.480789 C30.3705258,104.369084 21.6160117,97.9021509 10.3019905,87.0799893 C12.5132475,81.5650258 14.6907348,77.9393668 16.8344525,76.2030121 C18.9781702,74.4666574 21.4537468,73.3760883 24.2611822,72.931305 Z" id="path-30"></path>
<path d="M25.4089585,0 L194.514854,0 C200.074056,-4.28694294e-15 206.002572,3.97076943 207.756563,8.86896175 L219.50733,41.6841202 C221.261321,46.5823125 217.314378,50.5530819 210.691584,50.5530819 L9.23222777,50.5530819 C2.6094343,50.5530819 -1.33750942,46.5823125 0.416482222,41.6841202 L12.1672486,8.86896175 C13.9212403,3.97076943 19.8497557,2.14347147e-15 25.4089585,0 Z" id="path-32"></path>
<filter x="-15.8%" y="-36.7%" width="126.2%" height="196.7%" filterUnits="objectBoundingBox" id="filter-34">
<feOffset dx="-6" dy="7" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="8.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.384313725 0 0 0 0 0.301960784 0 0 0 0 0.674509804 0 0 0 0.132557745 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<path d="M25.4089585,0 L194.514854,0 C200.074056,-4.28694294e-15 206.002572,3.97076943 207.756563,8.86896175 L219.50733,41.6841202 C221.261321,46.5823125 217.314378,50.5530819 210.691584,50.5530819 L9.23222777,50.5530819 C2.6094343,50.5530819 -1.33750942,46.5823125 0.416482222,41.6841202 L12.1672486,8.86896175 C13.9212403,3.97076943 19.8497557,2.14347147e-15 25.4089585,0 Z" id="path-35"></path>
<filter x="-15.8%" y="-36.7%" width="126.2%" height="196.7%" filterUnits="objectBoundingBox" id="filter-37">
<feOffset dx="-6" dy="7" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="8.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.37254902 0 0 0 0 0.290196078 0 0 0 0 0.670588235 0 0 0 0.174479167 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<path d="M25.4089585,0 L194.514854,0 C200.074056,-4.28694294e-15 206.002572,3.97076943 207.756563,8.86896175 L219.50733,41.6841202 C221.261321,46.5823125 217.314378,50.5530819 210.691584,50.5530819 L9.23222777,50.5530819 C2.6094343,50.5530819 -1.33750942,46.5823125 0.416482222,41.6841202 L12.1672486,8.86896175 C13.9212403,3.97076943 19.8497557,2.14347147e-15 25.4089585,0 Z" id="path-38"></path>
<path d="M25.3990486,0 L194.438989,0 C199.996024,-4.31525518e-15 205.922227,3.99699357 207.675535,8.927535 L219.421718,41.9594145 C221.175026,46.889956 217.229621,50.8869495 210.609411,50.8869495 L9.22862704,50.8869495 C2.60841658,50.8869495 -1.33698777,46.889956 0.416319787,41.9594145 L12.1625032,8.927535 C13.9158107,3.99699357 19.842014,2.15762759e-15 25.3990486,0 Z" id="path-40"></path>
</defs>
<g id="desktop-prototype" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1" transform="translate(-82.000000, -2257.000000)">
<g id="Group-25" transform="translate(82.000000, 2291.000000)">
<path d="M116.365189,594.41664 C122.775536,592.294345 129.126339,590.109457 134.609474,588.415127 C144.416717,585.384615 155.56802,582.984237 158.362641,581.019778 C198.334326,570.090648 222.443066,563.378332 230.688859,560.882828 C242.994552,557.158639 280.575064,551.866847 286.376084,549.636374 C289.322392,549.253535 280.897976,546.691316 280.519722,546.886206 C276.434457,547.877536 242.488572,552.960041 226.699887,556.842383 C210.202178,560.899069 188.353858,564.632634 169.366414,568.714148 C174.381174,566.943127 181.686031,563.68789 191.280985,558.948438 C209.402557,550.578771 219.432356,545.716554 221.370383,544.361787 C223.665212,543.902514 225.56398,543.653488 227.177847,543.479572 C227.110595,543.527563 227.58164,543.470867 228.184041,543.377308 C229.562222,543.246291 230.713723,543.176696 231.704748,543.158164 C235.478869,543.111292 235.81302,539.905226 232.445701,540.335192 C229.078382,540.765158 230.734881,539.983979 229.276936,540.000251 C227.818991,540.016524 222.613853,540.354159 220.227547,540.912469 C217.84124,541.47078 214.972044,542.840557 211.962327,543.944732 C211.60648,544.075282 211.302359,544.205451 211.055152,544.33148 C205.16254,546.26592 183.626501,555.885877 174.170241,559.225466 C164.71398,562.565054 145.999232,568.617328 138.3845,571.098439 C132.310374,573.077573 121.492608,576.540852 114.405559,579.269734 C110.628578,580.153147 102.259136,582.649283 89.1880652,586.783202 C90.9952346,585.092126 89.5591521,584.500051 84.8798177,585.006977 C76.2455088,585.942358 70.2021238,589.179107 64.8242649,591.425296 C61.8098475,591.822328 59.8407251,592.265829 58.9168976,592.755799 C56.8630953,593.845074 53.0985482,596.864802 47.6232562,601.814982 C47.701058,601.929683 47.6419308,602.047226 47.7382709,602.116491 C48.4678368,602.641021 49.9604611,603.403251 52.2161437,604.403183 C49.7519763,605.204965 48.1505101,605.736308 47.411745,605.997211 C47.283658,606.042447 46.8950358,606.263731 46.2458786,606.661065 C23.2795717,610.52008 4.99403135,613.666903 0.739005955,618.045258 C-3.53212232,622.440183 11.3021235,623.917598 29.9842759,618.575186 C32.6719527,617.626001 34.3120174,616.814121 34.9044699,616.139546 C38.1028288,615.433985 41.1145646,614.925392 43.9396773,614.613768 C46.9688737,614.279633 49.2354373,614.030821 50.7393679,613.867334 L54.2309157,612.16513 C60.6066705,610.496385 64.2085667,609.380708 65.0366042,608.818099 C66.2786605,607.974185 64.3276444,607.41352 64.3987263,606.661065 C64.4200992,606.434817 64.7976467,606.086503 65.5313689,605.616125 C69.2725574,604.622421 69.3196484,604.556982 69.8454606,604.371285 C73.5464019,603.947123 77.1568398,603.568546 80.7638213,603.096414 C87.8361081,602.381243 95.3963674,601.550312 117.917733,599.263619 C118.41809,599.199741 118.977702,599.094194 119.57444,598.949925 L125.759678,598.278507 C117.957188,603.435521 113.333282,606.352246 111.887958,607.028684 C109.719971,608.043341 103.330714,609.53043 101.545132,610.052453 C99.7595488,610.574476 96.5841283,611.78588 96.5380779,612.210717 C96.4920275,612.635553 97.2166218,612.472092 97.8896183,612.524853 C98.5626148,612.577613 94.4923753,615.90686 93.9191702,616.326182 C93.3459651,616.745504 93.6487139,616.997606 95.0700702,616.83753 C96.4914264,616.677454 97.4143272,616.29763 97.905567,615.967089 C98.3968068,615.636548 101.152693,613.781576 102.294759,613.447688 C103.436825,613.1138 108.637348,612.620257 110.355483,612.382656 C112.073617,612.145055 115.927076,611.39354 117.745633,610.368516 C119.564191,609.343492 120.157642,607.530177 121.548393,607.123585 C122.939144,606.716993 136.626743,599.990398 142.468104,597.29409 C148.309466,594.597781 151.539343,592.721211 143.816457,592.999531 C140.830474,593.107141 136.247443,593.498265 130.067363,594.172902 C130.905684,593.225348 129.220629,593.149628 127.748005,593.233844 C125.518846,593.462391 121.920284,593.780371 116.365189,594.41664 Z" id="Path" fill="url(#linearGradient-1)" opacity="0.332642681"></path>
<g id="Group-24" transform="translate(87.000000, 0.000000)">
<polyline id="shadow" fill="url(#linearGradient-2)" opacity="0.5" points="0 507.2011 156.089227 443.276077 372.545305 443.276077 256.736395 525.204534"></polyline>
<ellipse id="shadow" fill="#5841A8" filter="url(#filter-3)" cx="289.439044" cy="441.742424" rx="126.501647" ry="9.83471074"></ellipse>
<g id="phone" transform="translate(147.380560, 0.000000)">
<rect id="side" fill="url(#linearGradient-4)" x="29.4600889" y="0" width="230.093453" height="447.588101" rx="43"></rect>
<rect id="front" fill="url(#linearGradient-5)" x="10.6665839" y="0" width="230.093453" height="447.588101" rx="43"></rect>
<rect id="speaker" fill="url(#linearGradient-6)" x="65.5233012" y="28.9111931" width="120.887951" height="8.03088697" rx="4.01544349"></rect>
<ellipse id="button" fill="url(#linearGradient-7)" cx="125.459344" cy="415.464553" rx="21.3331678" ry="22.4864835"></ellipse>
<g id="screen" transform="translate(20.317303, 64.247096)">
<mask id="mask-9" fill="white">
<use xlink:href="#path-8"></use>
</mask>
<g>
<use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-8"></use>
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-8"></use>
</g>
<g id="4" opacity="0.600000024" mask="url(#mask-9)">
<g transform="translate(10.158651, 244.674356)">
<rect id="Rectangle-16" fill="url(#linearGradient-11)" x="0" y="0" width="190.982645" height="61.034741" rx="20"></rect>
<ellipse id="Oval-Copy-2" fill="#A1B8E3" cx="28.9521563" cy="30.5173705" rx="21.3331678" ry="22.4864835"></ellipse>
<rect id="Rectangle" fill="#A1B8E3" x="57.9043127" y="10.7078493" width="118.348288" height="9.1016719" rx="4.55083595"></rect>
<rect id="Rectangle-Copy" fill="#A1B8E3" x="57.9043127" y="25.6988383" width="90.411997" height="9.1016719" rx="4.55083595"></rect>
<rect id="Rectangle-Copy-2" fill="#A1B8E3" opacity="0.5" x="57.9043127" y="43.9021821" width="33.5235495" height="6.42470958" rx="3.21235479"></rect>
</g>
</g>
<g id="3" opacity="0.600000024" mask="url(#mask-9)">
<g transform="translate(10.158651, 170.790196)">
<rect id="Rectangle-16" fill="url(#linearGradient-11)" x="0" y="0" width="190.982645" height="61.034741" rx="20"></rect>
<ellipse id="Oval-Copy-2" fill="#A1B8E3" cx="28.9521563" cy="30.5173705" rx="21.3331678" ry="22.4864835"></ellipse>
<rect id="Rectangle" fill="#A1B8E3" x="57.9043127" y="10.7078493" width="118.348288" height="9.1016719" rx="4.55083595"></rect>
<rect id="Rectangle-Copy" fill="#A1B8E3" x="57.9043127" y="25.6988383" width="90.411997" height="9.1016719" rx="4.55083595"></rect>
<rect id="Rectangle-Copy-2" fill="#A1B8E3" opacity="0.5" x="57.9043127" y="43.9021821" width="33.5235495" height="6.42470958" rx="3.21235479"></rect>
</g>
</g>
<g id="1" opacity="0.600000024" mask="url(#mask-9)">
<g transform="translate(10.158651, 16.597166)">
<rect id="Rectangle-16" fill="url(#linearGradient-11)" x="0" y="0" width="190.982645" height="61.034741" rx="20"></rect>
<ellipse id="Oval-Copy-2" fill="#A1B8E3" cx="28.9521563" cy="30.5173705" rx="21.3331678" ry="22.4864835"></ellipse>
<rect id="Rectangle" fill="#A1B8E3" x="57.9043127" y="10.7078493" width="118.348288" height="9.1016719" rx="4.55083595"></rect>
<rect id="Rectangle-Copy" fill="#A1B8E3" x="57.9043127" y="25.6988383" width="90.411997" height="9.1016719" rx="4.55083595"></rect>
<rect id="Rectangle-Copy-2" fill="#A1B8E3" opacity="0.5" x="57.9043127" y="43.9021821" width="33.5235495" height="6.42470958" rx="3.21235479"></rect>
</g>
</g>
</g>
<g id="yellow-comment" filter="url(#filter-12)" transform="translate(0.000000, 153.122245)">
<rect id="Rectangle-16" fill="url(#linearGradient-13)" x="0" y="0" width="190.982645" height="61.034741" rx="20"></rect>
<ellipse id="Oval-Copy-2" fill="#F94A8A" cx="28.9521563" cy="30.5173705" rx="21.3331678" ry="22.4864835"></ellipse>
<rect id="Rectangle" fill="#F94A8A" x="57.9043127" y="10.7078493" width="118.348288" height="9.1016719" rx="4.55083595"></rect>
<rect id="Rectangle-Copy" fill="#F94A8A" x="57.9043127" y="25.6988383" width="90.411997" height="9.1016719" rx="4.55083595"></rect>
<rect id="Rectangle-Copy-2" fill="#F94A8A" opacity="0.5" x="57.9043127" y="43.9021821" width="33.5235495" height="6.42470958" rx="3.21235479"></rect>
</g>
</g>
<g id="person" transform="translate(80.240527, 177.655393)">
<g id="elbow" transform="translate(0.506318, 125.445698)">
<mask id="mask-16" fill="white">
<use xlink:href="#path-15"></use>
</mask>
<use id="Mask" fill="url(#linearGradient-14)" xlink:href="#path-15"></use>
<path d="M2.5306793,10.9544479 C3.31437678,12.6334896 13.9939153,21.5155317 15.7598563,23.615808 C17.5257973,25.7160843 17.9295308,31.2057693 18.9435836,30.6385952 C19.6196188,30.2604792 19.6196188,24.7037209 18.9435836,13.9683204 C7.47918242,10.8397109 2.00821431,9.83508674 2.5306793,10.9544479 Z" id="Path-7" fill="#5640A6" style="mix-blend-mode: multiply;" opacity="0.5" mask="url(#mask-16)"></path>
</g>
<g id="shoe" transform="translate(39.245183, 354.682499) rotate(2.000000) translate(-39.245183, -354.682499) translate(20.245183, 342.182499)">
<path d="M0.536848984,6.9095579 C0.536848984,11.8391224 -0.67106123,17.9988874 0.536848984,20.4470216 C1.7447592,22.8951558 7.7317598,24.1823102 9.70690695,24.1823102 C11.6820541,24.1823102 12.3426887,20.6704555 15.410135,22.4772031 C18.4775813,24.2839507 35.9603738,24.1823102 37.0962148,16.8514888 C38.2320558,9.52066741 29.3690427,9.52066741 25.4270063,9.52066741 C21.4849699,9.52066741 17.31021,7.49661944 11.4568378,2.24110439 C5.60346554,-3.01441065 0.536848984,1.97999344 0.536848984,6.9095579 Z" id="Path-90" fill="url(#linearGradient-17)"></path>
<g id="Group-9" transform="translate(19.746385, 7.473361)" stroke="#FFFFFF" stroke-linecap="round" stroke-width="2">
<path d="M0.509116662,5.75600602 C-0.448832523,3.26324939 2.47670841,0.528799143 3.19841409,0.462229408" id="Path-14" transform="translate(1.758406, 3.109118) scale(-1, 1) translate(-1.758406, -3.109118) "></path>
<path d="M5.23353713,5.51711846 C4.98923698,2.57312475 6.98287282,1.617817 7.76995545,1.54521693" id="Path-14-Copy" transform="translate(6.491446, 3.531168) scale(-1, 1) translate(-6.491446, -3.531168) "></path>
</g>
</g>
<g id="shoe" transform="translate(127.371240, 362.655823) rotate(-5.000000) translate(-127.371240, -362.655823) translate(108.371240, 350.155823)">
<path d="M0.536848984,6.9095579 C0.536848984,11.8391224 -0.67106123,17.9988874 0.536848984,20.4470216 C1.7447592,22.8951558 7.7317598,24.1823102 9.70690695,24.1823102 C11.6820541,24.1823102 12.3426887,20.6704555 15.410135,22.4772031 C18.4775813,24.2839507 35.9603738,24.1823102 37.0962148,16.8514888 C38.2320558,9.52066741 29.3690427,9.52066741 25.4270063,9.52066741 C21.4849699,9.52066741 17.31021,7.49661944 11.4568378,2.24110439 C5.60346554,-3.01441065 0.536848984,1.97999344 0.536848984,6.9095579 Z" id="Path-90" fill="url(#linearGradient-17)"></path>
<g id="Group-9" transform="translate(19.746385, 7.473361)" stroke="#FFFFFF" stroke-linecap="round" stroke-width="2">
<path d="M0.509116662,5.75600602 C-0.448832523,3.26324939 2.47670841,0.528799143 3.19841409,0.462229408" id="Path-14" transform="translate(1.758406, 3.109118) scale(-1, 1) translate(-1.758406, -3.109118) "></path>
<path d="M5.23353713,5.51711846 C4.98923698,2.57312475 6.98287282,1.617817 7.76995545,1.54521693" id="Path-14-Copy" transform="translate(6.491446, 3.531168) scale(-1, 1) translate(-6.491446, -3.531168) "></path>
</g>
</g>
<g id="jeans" transform="translate(20.252702, 182.029715)">
<mask id="mask-20" fill="white">
<use xlink:href="#path-19"></use>
</mask>
<use id="Mask" fill="url(#linearGradient-18)" xlink:href="#path-19"></use>
<path d="M29.1634131,108.054869 C29.1634131,100.837857 32.6902653,41.8665347 33.5004995,44.2865727 C34.0406556,45.8999313 36.4139728,51.0626724 40.6204511,59.774796 C32.9824258,96.7728523 29.1634131,112.86621 29.1634131,108.054869 Z" id="Path-10" fill="#9C8FCA" style="mix-blend-mode: multiply;" opacity="0.5" mask="url(#mask-20)"></path>
<path d="M9.76995713,12.6233868 C14.2317302,15.1533065 31.7044131,25.9218203 54.2186744,21.6063769 C65.3426737,19.4741733 72.4984703,16.6837065 75.7083327,12.6233868 C75.7083327,10.6233894 73.0101998,2.21101955 72.2567383,-1.0074589 C71.5032769,-4.22593734 4.3058658,9.52513144 9.76995713,12.6233868 Z" id="Path-6" fill="url(#linearGradient-21)" style="mix-blend-mode: multiply;" opacity="0.5" mask="url(#mask-20)"></path>
</g>
<g id="face" transform="translate(35.442229, 25.089140)">
<mask id="mask-23" fill="white">
<use xlink:href="#path-22"></use>
</mask>
<use id="Mask" fill="url(#linearGradient-14)" xlink:href="#path-22"></use>
<path d="M29.8748211,41.4980206 C25.0841362,41.4980206 17.610893,37.0257446 16.1725267,35.4977756 C14.7341604,33.9698067 28.1489949,50.4996689 27.029221,53.1323231 C26.1458186,55.2092541 22.9920359,55.8446104 24.9810691,55.8446104 C32.1546088,55.8446104 34.6655059,41.4980206 29.8748211,41.4980206 Z" id="Path-3" fill="#6A54B3" style="mix-blend-mode: multiply;" opacity="0.5" mask="url(#mask-23)"></path>
</g>
<path d="M37.5733676,67.969989 C20.8398763,51.4803055 7.58981926,37.407686 19.0170966,17.798602 C30.4443739,-1.81048212 57.0330922,-8.40234418 62.0030432,15.4341958 C62.0030432,22.2524965 59.6155011,27.4828739 54.840417,31.1253281 C53.947113,33.0418625 54.6780047,35.0166485 57.0330922,37.0496861 C59.3881797,39.0827237 59.3881797,40.9393208 57.0330922,42.6194774 C52.3824987,39.4658319 49.449968,39.9888753 48.2355,44.1886077 C46.413798,50.4882062 53.1380901,52.7431563 53.1380901,54.3199592 C54.683218,58.1831221 53.8613293,61.8815909 50.6724239,65.4153656 C49.0398577,67.1184479 44.6735056,67.969989 37.5733676,67.969989 Z" id="hair" fill="url(#linearGradient-24)"></path>
<path d="M20.3133879,90.2141403 C8.37149885,112.300638 1.68014445,125.773926 0.239324738,130.634004 C-1.20149498,135.494083 5.48985942,139.329441 20.3133879,142.140079 L29.5921936,100.465984 L20.3133879,90.2141403 Z" id="sleeve" fill="url(#linearGradient-25)"></path>
<g id="shirt" transform="translate(16.708479, 77.936476)">
<mask id="mask-27" fill="white">
<use xlink:href="#path-26"></use>
</mask>
<use id="Mask" fill="#B4AAD7" xlink:href="#path-26"></use>
<path d="M53.5075202,34.7715837 C58.3589895,58.6798984 62.2443943,72.8746902 65.1637345,77.3559591 C66.1071953,78.8041978 66.9795545,80.8846141 67.8027094,83.2818329 C70.8001726,92.0111449 73.1451841,104.941269 75.8950645,106.844152 C79.4001092,109.269599 84.4352198,81.5221662 81.9176645,72.0219114 C80.2392943,65.6884081 75.6175084,54.7650952 68.0523068,39.2519725 L53.5075202,34.7715837 Z" id="Path-4" fill="url(#linearGradient-28)" opacity="0.5" mask="url(#mask-27)"></path>
<path d="M24.1012989,2.79534071 C27.3400686,5.06019988 35.7791338,6.28618784 42.8725504,6.28618784 C49.9659671,6.28618784 52.1845285,6.36538543 55.578606,5.27628548 C58.9726835,4.18718552 57.6566505,2.79534071 55.578606,2.79534071 C53.5005615,2.79534071 47.055072,1.19806704 43.5858897,1.19806704 C40.1167074,1.19806704 20.8625292,0.530481528 24.1012989,2.79534071 Z" id="Path-11" fill="url(#linearGradient-29)" opacity="0.5" mask="url(#mask-27)"></path>
</g>
<path d="M36.9918041,78.8085369 C36.7135501,75.1516698 36.5744231,72.7335081 36.5744231,71.5540518 C36.5744231,69.7848674 50.5484012,72.2832248 60.604472,73.2747836 C61.6956397,77.6880301 61.5024156,77.9800034 61.5024156,78.8085369 C61.5024156,79.2226938 58.9910657,82.7729582 45.4795569,81.6218816 C42.1914044,81.3417563 39.3621535,80.4039747 36.9918041,78.8085369 Z" id="colar" fill="#B4AAD7"></path>
<g id="hand" transform="translate(115.208422, 81.995649) rotate(-26.000000) translate(-115.208422, -81.995649) translate(60.208422, 24.995649)">
<path d="M26.7296051,87.1112909 C34.1398389,87.1112909 44.3855578,84.2698049 44.3855578,80.5846056 C44.3855578,76.8994063 35.9552631,75.6312281 28.5450293,75.6312281 C21.1347955,75.6312281 17.8902976,79.3148847 16.9741216,81.8776161 C17.426059,84.0574017 19.3193713,87.1112909 26.7296051,87.1112909 Z" id="Oval" fill="#846DC2" transform="translate(30.679840, 81.371259) rotate(-40.000000) translate(-30.679840, -81.371259) "></path>
<g id="Path-2" transform="translate(15.202162, 0.000000)">
<mask id="mask-31" fill="white">
<use xlink:href="#path-30"></use>
</mask>
<use id="Mask" fill="url(#linearGradient-14)" transform="translate(46.877390, 57.064374) rotate(12.000000) translate(-46.877390, -57.064374) " xlink:href="#path-30"></use>
<path d="M25.1166119,71.2374442 C18.2015122,81.3829596 14.5537366,88.3735519 14.1732852,92.2092209 C13.7928338,96.04489 11.577511,94.0769918 7.52731684,86.3055264 C9.8416232,81.6244882 11.9719491,78.4502889 13.9182946,76.7829285 C15.8646401,75.1155681 19.5974125,73.2670733 25.1166119,71.2374442 Z" fill="#5640A6" style="mix-blend-mode: multiply;" opacity="0.5" mask="url(#mask-31)"></path>
<path d="M31.693004,79.1392297 C32.2480728,79.8531543 33.3542938,81.0888878 33.7486989,83.4882109" id="Path-9" stroke="#223762" stroke-width="2" stroke-linecap="round" mask="url(#mask-31)"></path>
</g>
<path d="M20.3989424,90.9400943 C25.320233,84.1293809 32.1861341,74.8042678 40.7889311,71.5337495 C24.6495514,51.7331482 19.7333124,45.1272861 14.646631,38.9294362 C9.55994957,32.7315864 -5.10459275,48.7862383 2.78118368,64.5782488 C10.6669601,80.3702593 17.7231979,87.5982928 20.3989424,90.9400943 Z" id="Path-85" fill="url(#linearGradient-25)"></path>
</g>
</g>
<g id="comment-stack" transform="translate(253.003295, 470.873031)">
<g id="other-comments" transform="translate(124.054616, 68.262139) rotate(-2.000000) translate(-124.054616, -68.262139) translate(5.554616, 17.262139)">
<g id="3" transform="translate(120.033360, 67.534069) rotate(2.000000) translate(-120.033360, -67.534069) translate(9.533360, 37.534069)">
<path d="M0,44.646685 L219.938322,44.646685 L219.938322,44.646685 C219.938322,52.6437715 213.455402,59.126691 205.458316,59.126691 L14.480006,59.126691 C6.48291949,59.126691 9.79360634e-16,52.6437715 0,44.646685 Z" id="side" fill="#B4AAD7"></path>
<g id="top" transform="translate(0.503291, 0.000000)">
<mask id="mask-33" fill="white">
<use xlink:href="#path-32"></use>
</mask>
<use id="Mask" fill="#EDE9F5" xlink:href="#path-32"></use>
<path d="M32.8604342,43.8863087 C46.4744135,43.8863087 58.924296,35.5476929 60.6680249,25.2614891 C62.4117539,14.9752852 54.123172,6.6366694 42.1549593,6.6366694 C30.1867465,6.6366694 17.736864,14.9752852 14.3473685,25.2614891 C10.9578729,35.5476929 19.2464548,43.8863087 32.8604342,43.8863087 Z" id="Oval-Copy-2" fill="#B4AAD7" mask="url(#mask-33)"></path>
<path d="M75.9483247,9.05000372 L188.308144,9.05000372 C190.750108,9.05000372 193.240797,10.7375807 193.871255,12.8193125 C194.501712,14.9010442 192.978551,16.5886212 190.46918,16.5886212 L75.0078073,16.5886212 C72.4984359,16.5886212 70.7020527,14.9010442 70.9954731,12.8193125 C71.2888935,10.7375807 73.5063607,9.05000372 75.9483247,9.05000372 Z" id="Rectangle" fill="#CAD7F1" mask="url(#mask-33)"></path>
<path d="M74.1348727,21.7200089 L161.692233,21.7200089 C164.245221,21.7200089 166.649123,23.4075859 167.061497,25.4893177 C167.473872,27.5710494 165.683918,29.2586264 163.063522,29.2586264 L73.1943552,29.2586264 C70.5739599,29.2586264 68.687574,27.5710494 68.9809944,25.4893177 C69.2744148,23.4075859 71.5818847,21.7200089 74.1348727,21.7200089 Z" id="Rectangle-Copy" fill="#CAD7F1" mask="url(#mask-33)"></path>
<path d="M71.271732,36.8033485 L102.189574,36.8033485 C104.086846,36.8033485 105.606738,37.9945793 105.584346,39.464037 C105.561955,40.9334947 103.978532,42.1247255 102.047673,42.1247255 L70.5824978,42.1247255 C68.6516383,42.1247255 67.2542715,40.9334947 67.4613918,39.464037 C67.668512,37.9945793 69.3744595,36.8033485 71.271732,36.8033485 Z" id="Rectangle-Copy-2" fill="#CAD7F1" opacity="0.5" mask="url(#mask-33)"></path>
</g>
</g>
<g id="2" filter="url(#filter-34)" transform="translate(112.830329, 48.970610) rotate(3.000000) translate(-112.830329, -48.970610) translate(2.330329, 18.970610)">
<path d="M0,44.646685 L219.938322,44.646685 L219.938322,44.646685 C219.938322,52.6437715 213.455402,59.126691 205.458316,59.126691 L14.480006,59.126691 C6.48291949,59.126691 9.79360634e-16,52.6437715 0,44.646685 Z" id="side" fill="#B4AAD7"></path>
<g id="top" transform="translate(0.503291, 0.000000)">
<mask id="mask-36" fill="white">
<use xlink:href="#path-35"></use>
</mask>
<use id="Mask" fill="#EDE9F5" xlink:href="#path-35"></use>
<path d="M32.8604342,43.8863087 C46.4744135,43.8863087 58.924296,35.5476929 60.6680249,25.2614891 C62.4117539,14.9752852 54.123172,6.6366694 42.1549593,6.6366694 C30.1867465,6.6366694 17.736864,14.9752852 14.3473685,25.2614891 C10.9578729,35.5476929 19.2464548,43.8863087 32.8604342,43.8863087 Z" id="Oval-Copy-2" fill="#CAD7F1" mask="url(#mask-36)"></path>
<path d="M75.9483247,9.05000372 L188.308144,9.05000372 C190.750108,9.05000372 193.240797,10.7375807 193.871255,12.8193125 C194.501712,14.9010442 192.978551,16.5886212 190.46918,16.5886212 L75.0078073,16.5886212 C72.4984359,16.5886212 70.7020527,14.9010442 70.9954731,12.8193125 C71.2888935,10.7375807 73.5063607,9.05000372 75.9483247,9.05000372 Z" id="Rectangle" fill="#CAD7F1" mask="url(#mask-36)"></path>
<path d="M74.1348727,21.7200089 L161.692233,21.7200089 C164.245221,21.7200089 166.649123,23.4075859 167.061497,25.4893177 C167.473872,27.5710494 165.683918,29.2586264 163.063522,29.2586264 L73.1943552,29.2586264 C70.5739599,29.2586264 68.687574,27.5710494 68.9809944,25.4893177 C69.2744148,23.4075859 71.5818847,21.7200089 74.1348727,21.7200089 Z" id="Rectangle-Copy" fill="#CAD7F1" mask="url(#mask-36)"></path>
<path d="M71.271732,36.8033485 L102.189574,36.8033485 C104.086846,36.8033485 105.606738,37.9945793 105.584346,39.464037 C105.561955,40.9334947 103.978532,42.1247255 102.047673,42.1247255 L70.5824978,42.1247255 C68.6516383,42.1247255 67.2542715,40.9334947 67.4613918,39.464037 C67.668512,37.9945793 69.3744595,36.8033485 71.271732,36.8033485 Z" id="Rectangle-Copy-2" fill="#CAD7F1" opacity="0.5" mask="url(#mask-36)"></path>
</g>
</g>
<g id="1" filter="url(#filter-37)" transform="translate(15.046970, 0.204208)">
<path d="M0,44.646685 L219.938322,44.646685 L219.938322,44.646685 C219.938322,52.6437715 213.455402,59.126691 205.458316,59.126691 L14.480006,59.126691 C6.48291949,59.126691 9.79360634e-16,52.6437715 0,44.646685 Z" id="side" fill="#B4AAD7"></path>
<g id="top" transform="translate(0.503291, 0.000000)">
<mask id="mask-39" fill="white">
<use xlink:href="#path-38"></use>
</mask>
<use id="Mask" fill="#EDE9F5" xlink:href="#path-38"></use>
<path d="M32.8604342,43.8863087 C46.4744135,43.8863087 58.924296,35.5476929 60.6680249,25.2614891 C62.4117539,14.9752852 54.123172,6.6366694 42.1549593,6.6366694 C30.1867465,6.6366694 17.736864,14.9752852 14.3473685,25.2614891 C10.9578729,35.5476929 19.2464548,43.8863087 32.8604342,43.8863087 Z" id="Oval-Copy-2" fill="#B4AAD7" mask="url(#mask-39)"></path>
<path d="M75.9483247,9.05000372 L188.308144,9.05000372 C190.750108,9.05000372 193.240797,10.7375807 193.871255,12.8193125 C194.501712,14.9010442 192.978551,16.5886212 190.46918,16.5886212 L75.0078073,16.5886212 C72.4984359,16.5886212 70.7020527,14.9010442 70.9954731,12.8193125 C71.2888935,10.7375807 73.5063607,9.05000372 75.9483247,9.05000372 Z" id="Rectangle" fill="#CAD7F1" mask="url(#mask-39)"></path>
<path d="M74.1348727,21.7200089 L161.692233,21.7200089 C164.245221,21.7200089 166.649123,23.4075859 167.061497,25.4893177 C167.473872,27.5710494 165.683918,29.2586264 163.063522,29.2586264 L73.1943552,29.2586264 C70.5739599,29.2586264 68.687574,27.5710494 68.9809944,25.4893177 C69.2744148,23.4075859 71.5818847,21.7200089 74.1348727,21.7200089 Z" id="Rectangle-Copy" fill="#CAD7F1" mask="url(#mask-39)"></path>
<path d="M71.271732,36.8033485 L102.189574,36.8033485 C104.086846,36.8033485 105.606738,37.9945793 105.584346,39.464037 C105.561955,40.9334947 103.978532,42.1247255 102.047673,42.1247255 L70.5824978,42.1247255 C68.6516383,42.1247255 67.2542715,40.9334947 67.4613918,39.464037 C67.668512,37.9945793 69.3744595,36.8033485 71.271732,36.8033485 Z" id="Rectangle-Copy-2" fill="#CAD7F1" opacity="0.5" mask="url(#mask-39)"></path>
</g>
</g>
</g>
<g id="top-comment">
<path d="M0,44.941545 L219.852542,44.941545 L219.852542,44.941545 C219.852542,52.9914466 213.326807,59.5171812 205.276906,59.5171812 L14.5756362,59.5171812 C6.52573462,59.5171812 9.85828623e-16,52.9914466 0,44.941545 Z" id="side" fill="#B4AAD7"></path>
<g id="top" transform="translate(0.503095, 0.000000)">
<mask id="mask-41" fill="white">
<use xlink:href="#path-40"></use>
</mask>
<use id="Mask" fill="#EDE9F5" xlink:href="#path-40"></use>
<path d="M32.847618,44.176147 C46.4562877,44.176147 58.9013145,35.7824605 60.6443633,25.4283234 C62.3874122,15.0741864 54.102063,6.68049993 42.1385181,6.68049993 C30.1749731,6.68049993 17.7299464,15.0741864 14.3417728,25.4283234 C10.9535992,35.7824605 19.2389483,44.176147 32.847618,44.176147 Z" id="Oval-Copy-2" fill="#B4AAD7" opacity="0.5" mask="url(#mask-41)"></path>
<path d="M75.9187035,9.10977264 L188.2347,9.10977264 C190.675712,9.10977264 193.16543,10.8084949 193.795642,12.903975 C194.425853,14.9994551 192.903286,16.6981774 190.394894,16.6981774 L74.9785529,16.6981774 C72.4701602,16.6981774 70.6744776,14.9994551 70.9677836,12.903975 C71.2610896,10.8084949 73.4776919,9.10977264 75.9187035,9.10977264 Z" id="Rectangle" fill="#B4AAD7" opacity="0.5" mask="url(#mask-41)"></path>
<path d="M74.1059588,21.8634543 L161.629171,21.8634543 C164.181163,21.8634543 166.584127,23.5621766 166.99634,25.6576567 C167.408554,27.7531368 165.619298,29.4518591 162.999925,29.4518591 L73.1658082,29.4518591 C70.5464348,29.4518591 68.6607847,27.7531368 68.9540906,25.6576567 C69.2473966,23.5621766 71.5539665,21.8634543 74.1059588,21.8634543 Z" id="Rectangle-Copy" fill="#B4AAD7" opacity="0.5" mask="url(#mask-41)"></path>
<path d="M71.2439348,37.0464087 L102.149718,37.0464087 C104.046251,37.0464087 105.565549,38.2455068 105.543167,39.7246692 C105.520784,41.2038317 103.937979,42.4029297 102.007872,42.4029297 L70.5549694,42.4029297 C68.6248629,42.4029297 67.2280411,41.2038317 67.4350806,39.7246692 C67.6421201,38.2455068 69.3474022,37.0464087 71.2439348,37.0464087 Z" id="Rectangle-Copy-2" fill="#B4AAD7" opacity="0.300000012" mask="url(#mask-41)"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

17
src/images/serviecs-background.svg Normal file
View File

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1366px" height="1381px" viewBox="0 0 1366 1381" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
<title>showcase_background</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="124.893553%" y1="124.815104%" x2="57.1858724%" y2="60.5979548%" id="linearGradient-1">
<stop stop-color="#EDE9F5" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="desktop-prototype" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1" transform="translate(0.000000, -1836.000000)" fill="url(#linearGradient-1)">
<path d="M0,1836 L1366,1836 L1366,2862.64505 C1281.16971,3098.88168 1053.50304,3217 683,3217 C312.496956,3217 84.8302897,3217 0,3217 L0,1836 Z" id="showcase_background"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

405
src/images/ux-ui-design.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

212
src/images/web-development-agency.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

2
src/pages/about.js
View File

@@ -7,7 +7,7 @@ const AboutPage = () => (
<div>
<PageIntro
intro="About Us"
headline="Founded By Software Engineers"
headline="Founded by software engineers"
text="focused on creating solutions that make valuable impact"
sectionClasses="mb-16 lg:mb-8"
/>

51
src/pages/contact.js
View File

@@ -5,17 +5,52 @@ import SectionIntro from '../components/SectionIntro'
const ContactPage = () => (
<div>
<PageIntro intro="Contact" headline="Let's Connect" text="and build something awesome together" sectionClasses="mb-16 lg:mb-8" />
<PageIntro intro="Contact" headline="Let's connect" text="and build something awesome together" sectionClasses="mb-16 lg:mb-8" />
<section className="container mx-auto my-12 p-4">
<SectionIntro
headline="Use the form below or any of the alternatives to connect"
/>
<SectionIntro
headline="Use the form below or any of the alternatives to connect"
/>
<p>Request a Proposal</p>
<p>Request a Video Call</p>
<p>Old-fashioned phone calls work as well: - +...</p>
</section>
<form className="container mx-auto max-w-md p-6">
<div className="flex flex-wrap -mx-3">
<div className="w-full md:w-1/2 p-3">
<label className="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
Name
</label>
<input className="appearance-none block w-full bg-grey-lightest text-grey-darker border rounded py-3 px-4" id="grid-first-name" type="text" placeholder="Jane" required />
</div>
<div className="w-full md:w-1/2 p-3">
<label className="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
E-mail
</label>
<input className="appearance-none block w-full bg-grey-lightest text-grey-darker border rounded py-3 px-4" id="grid-last-name" type="email" placeholder="Doe" required />
</div>
<div className="w-full p-3">
<label className="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
Message
</label>
<textarea className="appearance-none block w-full bg-grey-lightest text-grey-darker border rounded py-3 px-4" id="grid-last-name" type="text" placeholder="Doe" required />
</div>
</div>
<div className="w-full">
<button className="w-full shadow bg-purple hover:bg-purple-light text-white font-bold py-2 px-4 rounded" type="submit">
Send Mail
</button>
</div>
</form>
<p>Request a Proposal</p>
<p>Request a Video Call</p>
<p>Old-fashioned phone calls work as well: - +...</p>
</section>
</div>
)

31
src/pages/index.js
View File

@@ -8,10 +8,10 @@ import PageIntro from '../components/PageIntro'
import InfoBox from '../components/InfoBox'
import Technologies from '../components/Technologies'
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 ImgIntro from '../images/web-development-agency.svg'
import ImgDesign from '../images/ux-ui-design.svg'
import ImgFullstack from '../images/fullstack-web-development.svg'
import ImgMobile from '../images/mobile-development.svg'
import LogoIBM from '../images/logo-ibm-color.svg'
import LogoRicoh from '../images/logo-ricoh-color.svg'
@@ -40,36 +40,27 @@ const IndexPage = ({ ...props }) => (
/>
</section>
<section className="bg-saburly-indigolight relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4">
<title>bg-saburly-white</title>
<path
d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z"
transform="translate(0 0)"
style={{ fill: '#fff' }}
/>
</svg>
<section className="relative">
<Service
img={ImgDesign}
title="User Experience (UX) Design"
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
reversed
img={ImgFullstack}
title="Full-Stack Web Development"
text="At Saburly, we are experts in modern web development using both client-side and server-side technologies. Our talented developers work with popular languages and are always up to speed on the cutting edge trends in web application development. We deliver high-quality, maintainable code on time and know how to balance between cost, time and quality."
/>
<Service
reversed
img={ImgMobile}
imgClasses="max-h-sm"
title="Mobile App Development"
text="We have what it takes to develop competitive 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."
/>
<Service
img={ImgDesign}
title="User Experience Design"
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."
/>
<div className="py-8 text-center lg:flex justify-center">
<Button
standard

6
src/pages/services.js
View File

@@ -10,7 +10,7 @@ const ServicesPage = () => (
<div>
<PageIntro
intro="Services"
headline="Experienced Digital Agency"
headline="Experienced digital agency"
text="with a mission is to make our clients stand out"
sectionClasses="mb-16 lg:mb-8"
/>
@@ -19,7 +19,7 @@ const ServicesPage = () => (
<SectionIntro
classes="text-center max-w-lg mx-auto"
headline="Software Development Services"
text="We have experiences with a wide variety of industries and are always keeping track of emerging technologies so that we can deliver forward-thinking solutions. Our developers are handpicked with care to ensure that we always deliver top-notch software quality. With our agile development process we can ensure high productivity and know how to balance between cost, time and quality."
text="We are always keeping track of emerging technologies so that we can deliver forward-thinking solutions. Our developers are handpicked with care to ensure that we deliver top-notch software quality. Our flexible agile development processes ensure high productivity and we know how to balance between cost, time and quality."
/>
<div className="md:flex mt-4">
<div className="bg-indigo shadow p-6 bg:indigo-light md:rounded-tl">
@@ -77,7 +77,7 @@ const ServicesPage = () => (
<div className="bg-indigo-darkest text-center py-4 lg:px-4">
<Link className="no-underline text-white" to="/contact">
<div
className="p-2 bg-indigo-darker items-center text-indigo-lightest leading-none lg:rounded-full flex lg:inline-flex"
className="p-2 bg-saburly-dark items-center text-indigo-lightest leading-none lg:rounded-full flex lg:inline-flex"
role="alert"
>
<span className="flex rounded-full bg-indigo uppercase px-2 py-1 text-xs font-bold mr-3">

11
src/styles/general.css
View File

@@ -18,12 +18,11 @@ body {
}
.bg-saburly-light {
background: rgb(69, 76, 183);
background: linear-gradient(
90deg,
rgba(255, 255, 255, 1) 0%,
rgba(241, 245, 248, 1) 100%
);
background: #faf9fc;
}
.bg-saburly-dark {
background-color: #210b44;
}
.bg-saburly-light svg,