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

Add functionality for dynamic header movement, design tweaks

Browse Source
This commit is contained in:
Moris Zen
2018-08-30 09:57:48 +02:00
parent 10e200fbd6
commit 7b76680ec4
14 changed files with 258 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Header.css
View File

@@ -1,6 +1,3 @@
.side-toggle {
}
.menu_icon [class*='menu_bar-'] {
background: #ffffff;
-webkit-transform: rotate(0deg);
@@ -68,3 +65,8 @@
background-color: rgba(0, 0, 0, 0.5);
z-index: 99;
}
.saburly-menu,
.headroom {
z-index: 9999;
}

82
src/components/Header.js
View File

@@ -4,6 +4,8 @@ import LogoSaburly from '../images/saburly-logo-4.svg'
import LogoSaburlyWhite from '../images/saburly-logo-white.svg'
import Button from './Button'
import Headroom from 'react-headroom'
import './Header.css'
let menuClasses =
@@ -12,48 +14,50 @@ let menuClasses =
class Header extends Component {
render() {
return (
<header className="saburly-main-bg saburly-bottom-shadow">
<nav className="container mx-auto flex items-center justify-between lg:p-6 p-4">
<Link to="/">
<div className="max-w-xs mr-8">
<img
src={LogoSaburlyWhite}
className="w-full saburly-logo"
alt="Saburly Logo"
/>
<Headroom>
<header className="saburly-main-bg saburly-menu saburly-bottom-shadow">
<nav className="container mx-auto flex items-center justify-between lg:p-6 p-4">
<Link to="/">
<div className="max-w-xs mr-8">
<img
src={LogoSaburlyWhite}
className="w-full saburly-logo"
alt="Saburly Logo"
/>
</div>
</Link>
<div className="side-toggle">
<button className="menu_icon visible lg:invisible">
<span className="menu_bar-top" />
<span className="menu_bar-mid" />
<span className="menu_bar-bot" />
</button>
</div>
</Link>
<div className="side-toggle">
<button className="menu_icon visible lg:invisible">
<span className="menu_bar-top" />
<span className="menu_bar-mid" />
<span className="menu_bar-bot" />
</button>
</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 font- text-sm">
<Link to="/services">
<li className={menuClasses}>Services</li>
</Link>
<Link to="/about">
<li className={menuClasses}>About Us</li>
</Link>
<Link to="/blog">
<li className={menuClasses}>Blog</li>
</Link>
<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 font- text-sm">
<Link to="/services">
<li className={menuClasses}>Services</li>
</Link>
<Link to="/about">
<li className={menuClasses}>About Us</li>
</Link>
<Link to="/blog">
<li className={menuClasses}>Blog</li>
</Link>
<Button
text="Contact"
standard
classes="rounded-full font-medium text-white hover:shadow"
url="/contact"
/>
</ul>
</div>
</nav>
</header>
<Button
text="Contact"
standard
classes="rounded-full font-medium text-white hover:shadow"
url="/contact"
/>
</ul>
</div>
</nav>
</header>
</Headroom>
)
}
}

23
src/components/PageIntro.js
View File

@@ -4,15 +4,24 @@ import SectionIntro from './SectionIntro'
import Button from './Button'
const PageIntro = ({ ...props }) => (
<section className="bg-saburly-light relative">
<section className="saburly-intro bg-saburly-light 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>
<div
className={`container mx-auto items-center flex lg:flex-row flex-col ${
className={`relative container mx-auto items-center flex lg:flex-row flex-col ${
props.reversed ? 'flex-col-reverse' : ''
} p-4`}
>
<div className="text-center lg:text-left">
{props.children}
<SectionIntro
header
intro={props.intro}
classes={`lg:text-left lg:max-w-sm content-center ${
props.sectionClasses
@@ -31,19 +40,11 @@ const PageIntro = ({ ...props }) => (
{props.image && (
<img
src={props.image}
className={`${props.imgClasses} md:max-h-sm md:max-w-md mx-auto z-10`}
className={`${props.imgClasses} md:max-h-sm md:max-w-md mx-auto`}
alt="Software Development Agency"
/>
)}
</div>
<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>
)

6
src/components/SectionIntro.js
View File

@@ -26,8 +26,10 @@ const IntroDefault = ({ ...props }) => (
)}
{props.text && (
<p
className={`${props.light ? headlineDark : ''}
font-light text-black-light text-lg leading-normal`}
className={`${props.light ? headlineDark : ''} ${
props.header ? 'saburly-text-intro' : 'text-black-light'
}
font-light text-lg leading-normal`}
>
{props.text}
</p>

2
src/components/Service.js
View File

@@ -9,7 +9,7 @@ const Service = ({ ...props }) => (
>
<img
src={props.img}
className={`w-full md:max-w-sm p-4 z-10 ${props.imgClasses}`}
className={`w-full md:max-w-sm p-4 ${props.imgClasses}`}
alt={`${props.title} agency`}
/>
<InfoBox

1
src/components/SideMenu.css
View File

@@ -22,7 +22,6 @@
.slideout-panel {
position: relative;
z-index: 1;
will-change: transform;
background-color: #fff;
min-height: 100vh;
}

12
src/components/WorkStyle.js
View File

@@ -15,7 +15,7 @@ const WorkStyle = ({ ...props }) => (
<div className="mx-auto text-center border-grey-lighter">
<div className="flex flex-wrap text-black">
<div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
<img src={HQCode} className="max-w-xs" alt="High Quality Code" />
<img src={HQCode} className="max-w-10" alt="High Quality Code" />
<h3 className="text-xl my-2">High Quality Code</h3>
<p className="leading-normal font-light text-lg">
We have deep understanding of software engineering & computer
@@ -27,7 +27,7 @@ const WorkStyle = ({ ...props }) => (
<div className="w-full md:w-1/2 p-8">
<img
src={ContDelivery}
className="max-w-xs"
className="max-w-10"
alt="High Quality Code"
/>
<h3 className="text-xl my-2">Continuous delivery</h3>
@@ -43,7 +43,7 @@ const WorkStyle = ({ ...props }) => (
<div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
<img
src={ModernDevops}
className="max-w-xs"
className="max-w-10"
alt="High Quality Code"
/>
<h3 className="text-xl my-2">Modern DevOps</h3>
@@ -56,7 +56,7 @@ const WorkStyle = ({ ...props }) => (
</p>
</div>
<div className="w-full md:w-1/2 p-8">
<img src={CodeReviews} className="max-w-xs" alt="High Quality Code" />
<img src={CodeReviews} className="max-w-10" alt="High Quality Code" />
<h3 className="text-xl my-2">Code Reviews</h3>
<p className="leading-normal font-light text-lg">
“Two Heads are Better Than One”. Code reviews are integrated part of
@@ -68,7 +68,7 @@ const WorkStyle = ({ ...props }) => (
</div>
<div className="flex flex-wrap md:border-t-2 border-grey-lighter text-black">
<div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
<img src={UXResearch} className="max-w-xs" alt="High Quality Code" />
<img src={UXResearch} className="max-w-10" alt="High Quality Code" />
<h3 className="text-xl my-2">UX testing/research</h3>
<p className="leading-normal font-light text-lg">
We know it takes more than just an user video or a survey to
@@ -81,7 +81,7 @@ const WorkStyle = ({ ...props }) => (
<div className="w-full md:w-1/2 p-8">
<img
src={UnitIntegration}
className="max-w-xs"
className="max-w-10"
alt="High Quality Code"
/>
<h3 className="text-xl my-2">Unit & Integration testing</h3>

149
src/images/user-experience-design-agency.svg
View File

@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1181px" height="762px" viewBox="0 0 1181 762" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="1182px" height="762px" viewBox="0 0 1182 762" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
<title>user-experience-design-agency</title>
<desc>Created with Sketch.</desc>
@@ -48,81 +48,89 @@
<stop stop-color="#FFE579" offset="0%"></stop>
<stop stop-color="#FEB755" offset="100%"></stop>
</linearGradient>
<linearGradient x1="83.2804773%" y1="11.2557844%" x2="111.028592%" y2="953.538449%" id="linearGradient-12">
<linearGradient x1="82.9091884%" y1="96.8702304%" x2="103.044557%" y2="-32.2935141%" id="linearGradient-12">
<stop stop-color="#9099D2" offset="0%"></stop>
<stop stop-color="#A8B4FE" offset="100%"></stop>
</linearGradient>
<linearGradient x1="83.2804773%" y1="11.2557844%" x2="111.028592%" y2="953.538449%" id="linearGradient-13">
<stop stop-color="#5763AB" offset="0%"></stop>
<stop stop-color="#283F6F" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="-142.327103%" x2="50%" y2="170.164832%" id="linearGradient-13">
<linearGradient x1="50%" y1="-142.327103%" x2="50%" y2="170.164832%" id="linearGradient-14">
<stop stop-color="#95B7E5" offset="0%"></stop>
<stop stop-color="#476DB1" offset="100%"></stop>
</linearGradient>
<linearGradient x1="83.2804773%" y1="11.2557844%" x2="59.8890922%" y2="97.3099621%" id="linearGradient-14">
<linearGradient x1="83.2804773%" y1="11.2557844%" x2="59.8890922%" y2="97.3099621%" id="linearGradient-15">
<stop stop-color="#3A4482" offset="0%"></stop>
<stop stop-color="#5763AB" offset="100%"></stop>
</linearGradient>
<linearGradient x1="83.2804773%" y1="11.2557844%" x2="50%" y2="152.078318%" id="linearGradient-15">
<linearGradient x1="83.2804773%" y1="11.2557844%" x2="50%" y2="152.078318%" id="linearGradient-16">
<stop stop-color="#476DB1" offset="0%"></stop>
<stop stop-color="#283F6F" offset="100%"></stop>
</linearGradient>
<linearGradient x1="83.2804773%" y1="11.2557844%" x2="59.8890922%" y2="97.3099621%" id="linearGradient-16">
<linearGradient x1="83.2804773%" y1="11.2557844%" x2="59.8890922%" y2="97.3099621%" id="linearGradient-17">
<stop stop-color="#476DB1" offset="0%"></stop>
<stop stop-color="#283F6F" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-17">
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-18">
<stop stop-color="#36558E" offset="0%"></stop>
<stop stop-color="#233A67" offset="100%"></stop>
</linearGradient>
<linearGradient x1="69.4657764%" y1="75.602262%" x2="69.4657764%" y2="14.0380158%" id="linearGradient-18">
<linearGradient x1="69.4657764%" y1="75.602262%" x2="69.4657764%" y2="14.0380158%" id="linearGradient-19">
<stop stop-color="#F4AF92" offset="0%"></stop>
<stop stop-color="#EC906C" offset="100%"></stop>
</linearGradient>
<linearGradient x1="85.0973284%" y1="109.304399%" x2="4.85382204%" y2="-47.1761978%" id="linearGradient-19">
<linearGradient x1="85.0973284%" y1="109.304399%" x2="4.85382204%" y2="-47.1761978%" id="linearGradient-20">
<stop stop-color="#032258" offset="0%"></stop>
<stop stop-color="#133E94" offset="100%"></stop>
</linearGradient>
<linearGradient x1="-8.77133659%" y1="109.673401%" x2="17.3111424%" y2="15.4296073%" id="linearGradient-20">
<linearGradient x1="-8.77133659%" y1="109.673401%" x2="17.3111424%" y2="15.4296073%" id="linearGradient-21">
<stop stop-color="#FAD0BA" offset="0%"></stop>
<stop stop-color="#F2A384" offset="100%"></stop>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-21">
<stop stop-color="#2865C6" offset="0%"></stop>
<stop stop-color="#10378A" offset="100%"></stop>
<linearGradient x1="153.403638%" y1="130.01615%" x2="0%" y2="50%" id="linearGradient-22">
<stop stop-color="#F59BA9" offset="0%"></stop>
<stop stop-color="#F35F72" offset="100%"></stop>
</linearGradient>
<linearGradient x1="60.7312459%" y1="0%" x2="52.0812714%" y2="50%" id="linearGradient-22">
<linearGradient x1="60.7312459%" y1="0%" x2="52.0812714%" y2="50%" id="linearGradient-23">
<stop stop-color="#3485F7" offset="0%"></stop>
<stop stop-color="#1A57CF" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="27.7727484%" x2="55.2277926%" y2="103.623291%" id="linearGradient-23">
<linearGradient x1="157.335369%" y1="150.77472%" x2="0%" y2="50%" id="linearGradient-24">
<stop stop-color="#F59BA9" offset="0%"></stop>
<stop stop-color="#F36578" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="27.7727484%" x2="55.2277926%" y2="103.623291%" id="linearGradient-25">
<stop stop-color="#1542AB" offset="0%"></stop>
<stop stop-color="#2B68EE" offset="100%"></stop>
</linearGradient>
<linearGradient x1="60.7312459%" y1="0%" x2="50%" y2="100%" id="linearGradient-24">
<linearGradient x1="60.7312459%" y1="0%" x2="50%" y2="100%" id="linearGradient-26">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#E5EEFF" offset="100%"></stop>
</linearGradient>
<path d="M161.477616,35.5599257 C154.438402,54.0618188 149.662282,67.1899742 147.149257,74.9443919 C143.377179,86.5838586 141.913161,96.1832587 142.757203,103.742592 C145.288475,126.412955 152.330923,133.837937 146.229848,188.066913 C143.844589,209.268116 130.452119,239.114348 127.867819,262.754131 C123.84193,299.580787 133.741561,312.32075 131.261754,318.411621 C127.867819,326.747768 91.645048,319.087117 73.5179769,338 C67.6801593,326.747768 89.8589052,287.07286 89.8589052,281.012684 C89.8589052,274.952509 90.6141307,229.44052 109.240975,196.05539 C121.658871,173.798637 126.403668,141.24171 123.475365,98.3846068 C92.2667319,92.3926435 69.4404238,84.5792385 54.9964408,74.9443919 C40.5524578,65.3095452 22.2203109,44.5228416 0,12.584281 C3.31519883,4.19476034 7.11696179,-2.74138439e-14 11.4052889,-2.84217094e-14 C17.8377795,-2.84217094e-14 61.4199951,39.4961717 95.11561,44.2873995 C109.240975,46.2959053 120.583895,37.9605352 131.261754,35.5599257 C148.249116,31.7408061 160.620007,31.8856958 162.679051,31.1823468 C164.914592,30.4187084 166.021469,30.9897592 165.999685,32.8954993 L161.477616,35.5599257 Z" id="path-25"></path>
<linearGradient x1="32.1013472%" y1="12.3094919%" x2="100%" y2="70.6149422%" id="linearGradient-27">
<path d="M161.477616,35.5599257 C154.438402,54.0618188 149.662282,67.1899742 147.149257,74.9443919 C143.377179,86.5838586 141.913161,96.1832587 142.757203,103.742592 C145.288475,126.412955 152.330923,133.837937 146.229848,188.066913 C143.844589,209.268116 130.452119,239.114348 127.867819,262.754131 C123.84193,299.580787 133.741561,312.32075 131.261754,318.411621 C127.867819,326.747768 91.645048,319.087117 73.5179769,338 C67.6801593,326.747768 89.8589052,287.07286 89.8589052,281.012684 C89.8589052,274.952509 90.6141307,229.44052 109.240975,196.05539 C121.658871,173.798637 126.403668,141.24171 123.475365,98.3846068 C92.2667319,92.3926435 69.4404238,84.5792385 54.9964408,74.9443919 C40.5524578,65.3095452 22.2203109,44.5228416 0,12.584281 C3.31519883,4.19476034 7.11696179,-2.74138439e-14 11.4052889,-2.84217094e-14 C17.8377795,-2.84217094e-14 61.4199951,39.4961717 95.11561,44.2873995 C109.240975,46.2959053 120.583895,37.9605352 131.261754,35.5599257 C148.249116,31.7408061 160.620007,31.8856958 162.679051,31.1823468 C164.914592,30.4187084 166.021469,30.9897592 165.999685,32.8954993 L161.477616,35.5599257 Z" id="path-27"></path>
<linearGradient x1="32.1013472%" y1="12.3094919%" x2="100%" y2="70.6149422%" id="linearGradient-29">
<stop stop-color="#78D0D6" offset="0%"></stop>
<stop stop-color="#31B1B9" offset="100%"></stop>
</linearGradient>
<linearGradient x1="124.314432%" y1="-25.949264%" x2="22.2387548%" y2="84.7037831%" id="linearGradient-28">
<linearGradient x1="124.314432%" y1="-25.949264%" x2="22.2387548%" y2="84.7037831%" id="linearGradient-30">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#E5EEFF" offset="100%"></stop>
</linearGradient>
<linearGradient x1="157.419759%" y1="-39.6921362%" x2="118.835577%" y2="115.937591%" id="linearGradient-29">
<linearGradient x1="157.419759%" y1="-39.6921362%" x2="118.835577%" y2="115.937591%" id="linearGradient-31">
<stop stop-color="#E5EDFF" offset="0%"></stop>
<stop stop-color="#5763AB" offset="100%"></stop>
</linearGradient>
<linearGradient x1="149.379226%" y1="-86.5655478%" x2="157.419759%" y2="219.657969%" id="linearGradient-30">
<linearGradient x1="149.379226%" y1="-86.5655478%" x2="157.419759%" y2="219.657969%" id="linearGradient-32">
<stop stop-color="#E5EDFF" offset="0%"></stop>
<stop stop-color="#6B9AD9" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Illustration" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="CRM-2" transform="translate(-72.000000, -141.000000)">
<g id="user-experience-design-agency" transform="translate(58.000000, 141.000000)">
<ellipse id="Shadow" fill-opacity="0.35" fill="#E2EBFC" opacity="0.806164985" cx="976" cy="716.958065" rx="219" ry="10.9580645"></ellipse>
<g id="Window" transform="translate(283.000000, 0.000000)" fill-rule="nonzero">
<g id="CRM-2" transform="translate(-71.000000, -141.000000)">
<g id="user-experience-design-agency" transform="translate(57.000000, 141.000000)">
<ellipse id="Shadow" fill-opacity="0.35" fill="#E2EBFC" opacity="0.806164985" cx="977" cy="716.958065" rx="219" ry="10.9580645"></ellipse>
<g id="Window" transform="translate(284.000000, 0.000000)" fill-rule="nonzero">
<path d="M20,0 L733,0 C744.045695,-2.02906125e-15 753,8.954305 753,20 L753,535 C753,537.209139 751.209139,539 749,539 L4,539 C1.790861,539 2.705415e-16,537.209139 0,535 L0,20 C-1.3527075e-15,8.954305 8.954305,2.02906125e-15 20,0 Z" id="Rectangle" fill="url(#linearGradient-1)"></path>
<rect id="Rectangle-2" fill="url(#linearGradient-2)" x="50" y="129" width="181" height="183"></rect>
<circle id="Chart-base" fill="url(#linearGradient-3)" cx="131" cy="409" r="81"></circle>
@@ -136,13 +144,14 @@
<rect id="Chart-bar-base" fill="url(#linearGradient-9)" x="50" y="2.84217094e-14" width="40" height="110"></rect>
</g>
<rect id="Chart-base" fill="url(#linearGradient-10)" x="383" y="267" width="325" height="227"></rect>
<g id="UI" transform="translate(261.000000, 147.000000)">
<rect id="UI-base" fill="url(#linearGradient-11)" x="0" y="0" width="58" height="58"></rect>
<rect id="UI-base" fill="url(#linearGradient-2)" x="0" y="88" width="58" height="58"></rect>
<rect id="UI-base" fill="url(#linearGradient-11)" x="0" y="176" width="58" height="58"></rect>
<rect id="UI-base" fill="url(#linearGradient-2)" x="0" y="264" width="58" height="58"></rect>
<g id="UI" transform="translate(131.000000, 147.000000)">
<rect id="UI-base" fill="url(#linearGradient-11)" x="130" y="0" width="58" height="58"></rect>
<rect id="UI-base" fill="url(#linearGradient-2)" x="130" y="88" width="58" height="58"></rect>
<rect id="UI-base" fill="url(#linearGradient-12)" x="0" y="15" width="58" height="5"></rect>
<rect id="UI-base" fill="url(#linearGradient-11)" x="130" y="176" width="58" height="58"></rect>
<rect id="UI-base" fill="url(#linearGradient-2)" x="130" y="264" width="58" height="58"></rect>
</g>
<path d="M20,-2.20268248e-13 L733,-2.27373675e-13 C744.045695,-1.70539449e-13 753,8.954305 753,20 L753,75 C753,77.209139 751.209139,79 749,79 L4,79 C1.790861,79 2.705415e-16,77.209139 0,75 L0,20 C-1.3527075e-15,8.954305 8.954305,-2.25344614e-13 20,-2.27373675e-13 Z" id="Titlebar-base" fill="url(#linearGradient-12)"></path>
<path d="M20,-2.20268248e-13 L733,-2.27373675e-13 C744.045695,-1.70539449e-13 753,8.954305 753,20 L753,75 C753,77.209139 751.209139,79 749,79 L4,79 C1.790861,79 2.705415e-16,77.209139 0,75 L0,20 C-1.3527075e-15,8.954305 8.954305,-2.25344614e-13 20,-2.27373675e-13 Z" id="Titlebar-base" fill="url(#linearGradient-13)"></path>
<g id="Titlebar-button" transform="translate(25.000000, 27.000000)" fill="#FFFFFF">
<circle cx="12.5" cy="12.5" r="12.5"></circle>
<circle cx="51.5" cy="12.5" r="12.5"></circle>
@@ -159,58 +168,62 @@
<path d="M406.828648,448.205462 C406.274253,449.160826 405.050351,449.485875 404.094988,448.93148 C403.139624,448.377084 402.814575,447.153183 403.368971,446.197819 L443.82609,376.479959 C446.598067,371.703142 452.717574,370.077897 457.494392,372.849874 C458.320605,373.329323 459.073859,373.924682 459.731191,374.617802 L494.171934,410.933626 C496.452185,413.338022 500.249841,413.438662 502.654237,411.158411 C502.876032,410.948068 503.081428,410.721083 503.268632,410.47944 L569.176407,325.405417 C572.558758,321.039464 578.84,320.242098 583.205953,323.624449 C584.087101,324.307084 584.847921,325.132233 585.456951,326.065773 L616.910913,374.279386 C618.721501,377.054712 622.439119,377.836786 625.214445,376.026198 C625.846175,375.614065 626.394531,375.086512 626.830776,374.471185 L682.723736,295.633666 C683.362574,294.732578 684.610931,294.519984 685.512019,295.158822 C686.413106,295.797661 686.625701,297.046018 685.986863,297.947105 L630.093903,376.784624 C629.366829,377.810169 628.452902,378.689425 627.400019,379.376313 C622.774475,382.39396 616.578445,381.090502 613.560798,376.464959 L582.106836,328.251346 C581.741418,327.691222 581.284926,327.196133 580.756237,326.786552 C578.136666,324.757141 574.367921,325.235561 572.33851,327.855132 L506.430735,412.929155 C506.118728,413.331895 505.776401,413.710202 505.406744,414.060773 C501.399417,417.861191 495.069989,417.693459 491.269571,413.686132 L456.828828,377.370308 C456.434429,376.954436 455.982477,376.597221 455.486749,376.309551 C452.620658,374.646365 448.948954,375.621512 447.285767,378.487603 L406.828648,448.205462 Z" id="Chart-base" fill="#859FC2"></path>
<path d="M406.35234,448.760057 C405.49165,449.452363 404.232699,449.315861 403.540393,448.455171 C402.848087,447.594481 402.98459,446.33553 403.845279,445.643224 L487.983706,377.965508 C491.403806,375.214511 496.21802,375.015276 499.853733,377.47427 L536.290698,402.118201 C538.696138,403.745106 541.921423,403.415843 543.948492,401.336432 L578.906861,365.475393 C582.663229,361.622031 588.795414,361.432288 592.78283,365.04604 L632.623091,401.152839 C634.916132,403.230997 638.41356,403.22427 640.698589,401.137306 L685.881448,359.870876 C686.697044,359.125975 687.962077,359.183285 688.706977,359.998881 C689.451878,360.814477 689.394568,362.07951 688.578972,362.82441 L643.396113,404.090841 C639.587731,407.569113 633.758684,407.580325 629.93695,404.116729 L590.096688,368.00993 C587.704239,365.841679 584.024928,365.955525 581.771107,368.267542 L546.812738,404.128581 C543.434289,407.594267 538.058815,408.143038 534.049748,405.431529 L497.612783,380.787598 C495.431355,379.312202 492.542827,379.431743 490.490767,381.082341 L406.35234,448.760057 Z" id="Chart-base" fill="#F25267"></path>
</g>
<g id="Table" transform="translate(779.010183, 501.112903)" fill-rule="nonzero">
<path d="M43.4114053,196.649636 L43.4114053,19.1981567 L24.5593719,19.1981567 L43.4114053,196.649636 Z M21,16 L46.6130346,16 L46.6130346,209.488479 C46.6130346,210.813199 45.5379709,211.887097 44.2118126,211.887097 C42.8465257,211.887097 41.7012685,210.858064 41.55719,209.501873 L21,16 Z" id="Table-base" fill="url(#linearGradient-13)" transform="translate(33.806517, 113.943548) scale(-1, 1) translate(-33.806517, -113.943548) "></path>
<path d="M371.578411,196.649636 L371.578411,19.1981567 L352.726378,19.1981567 L371.578411,196.649636 Z M349.167006,16 L374.780041,16 L374.780041,209.488479 C374.780041,210.813199 373.704977,211.887097 372.378819,211.887097 C371.013532,211.887097 369.868275,210.858064 369.724196,209.501873 L349.167006,16 Z" id="Table-base" fill="url(#linearGradient-13)"></path>
<rect id="Table-base" fill="url(#linearGradient-14)" x="0.989816701" y="0.887096774" width="393" height="15.9907834"></rect>
<g id="Table" transform="translate(780.010183, 501.112903)" fill-rule="nonzero">
<path d="M43.4114053,196.649636 L43.4114053,19.1981567 L24.5593719,19.1981567 L43.4114053,196.649636 Z M21,16 L46.6130346,16 L46.6130346,209.488479 C46.6130346,210.813199 45.5379709,211.887097 44.2118126,211.887097 C42.8465257,211.887097 41.7012685,210.858064 41.55719,209.501873 L21,16 Z" id="Table-base" fill="url(#linearGradient-14)" transform="translate(33.806517, 113.943548) scale(-1, 1) translate(-33.806517, -113.943548) "></path>
<path d="M371.578411,196.649636 L371.578411,19.1981567 L352.726378,19.1981567 L371.578411,196.649636 Z M349.167006,16 L374.780041,16 L374.780041,209.488479 C374.780041,210.813199 373.704977,211.887097 372.378819,211.887097 C371.013532,211.887097 369.868275,210.858064 369.724196,209.501873 L349.167006,16 Z" id="Table-base" fill="url(#linearGradient-14)"></path>
<rect id="Table-base" fill="url(#linearGradient-15)" x="0.989816701" y="0.887096774" width="393" height="15.9907834"></rect>
</g>
<g id="Group" transform="translate(811.000000, 356.000000)" fill-rule="nonzero">
<rect id="Imac" fill="url(#linearGradient-15)" x="78.4399185" y="115" width="44.0224033" height="31"></rect>
<rect id="Imac" fill="url(#linearGradient-16)" x="0" y="0" width="199.301426" height="115.93318"></rect>
<rect id="Imac" stroke="url(#linearGradient-17)" stroke-width="2" fill="url(#linearGradient-1)" x="8.00407332" y="7.99539171" width="183.293279" height="99.9423963"></rect>
<g id="Group" transform="translate(812.000000, 356.000000)" fill-rule="nonzero">
<rect id="Imac" fill="url(#linearGradient-16)" x="78.4399185" y="115" width="44.0224033" height="31"></rect>
<rect id="Imac" fill="url(#linearGradient-17)" x="0" y="0" width="199.301426" height="115.93318"></rect>
<rect id="Imac" stroke="url(#linearGradient-18)" stroke-width="2" fill="url(#linearGradient-1)" x="8.00407332" y="7.99539171" width="183.293279" height="99.9423963"></rect>
</g>
<ellipse id="Shadow" fill-opacity="0.35" fill="#E2EBFC" opacity="0.806164985" cx="260" cy="740.764516" rx="154" ry="20.7645161"></ellipse>
<g id="Girl" transform="translate(233.500000, 410.000000) scale(-1, 1) translate(-233.500000, -410.000000) translate(0.000000, 73.000000)">
<path d="M115.227811,488.132584 C126.5062,504.954796 181.292955,514.577268 279.588076,517 L327,517 L296.848626,452.626321 L209.861663,413 C135.494039,446.266178 103.949421,471.310373 115.227811,488.132584 Z" id="Jacket" fill="#BF8D30" fill-rule="nonzero"></path>
<g id="Head" transform="translate(153.000000, 65.000000)">
<path d="M53.6422696,88.7947646 C45.3140954,92.5997019 41.2824822,94.16121 41.54743,93.479289 C42.4363403,91.1914171 67.5499481,82.6777579 68.5513622,76.8097776 C69.1571383,73.2601147 69.1571383,69.3156925 68.5513622,64.9765112 L90.0275045,78.5824165 C88.0862794,86.6951681 88.6578445,93.4035598 91.7421998,98.7075915 C94.826555,104.011623 100.889749,108.712739 109.931782,112.810938 C84.941806,134.468841 66.7437588,145.963089 55.3376402,147.29368 C38.2284625,149.289566 40.0451746,135.664305 53.601126,115.623984 C62.6384269,102.26377 62.6521414,93.3206965 53.6422696,88.7947646 Z" id="neck" fill="url(#linearGradient-18)"></path>
<path d="M91.5198327,15.1137142 C122.427882,62.6143647 127.72121,67.3544858 124.531729,82.5186079 C117.973967,113.696947 26.9637124,145.869769 15.9865662,118.807365 C5.0094199,91.7449607 30.169447,105.79345 28.9552824,82.5186079 C28.5100092,73.9829738 18.9657969,55.4206776 0.322645382,26.8317192 C46.605631,-3.28769478 77.0046935,-7.19369646 91.5198327,15.1137142 Z" id="Hair" fill="url(#linearGradient-19)" fill-rule="nonzero"></path>
<ellipse id="Shadow" fill-opacity="0.35" fill="#E2EBFC" opacity="0.806164985" cx="261" cy="740.764516" rx="154" ry="20.7645161"></ellipse>
<g id="Girl" transform="translate(229.000000, 410.500000) scale(-1, 1) translate(-229.000000, -410.500000) translate(0.000000, 73.000000)">
<path d="M105.227811,488.132584 C116.5062,504.954796 171.292955,514.577268 269.588076,517 L317,517 L286.848626,452.626321 L199.861663,413 C125.494039,446.266178 93.9494214,471.310373 105.227811,488.132584 Z" id="Jacket" fill="#BF8D30" fill-rule="nonzero"></path>
<g id="Head" transform="translate(143.000000, 65.000000)">
<path d="M53.6422696,88.7947646 C45.3140954,92.5997019 41.2824822,94.16121 41.54743,93.479289 C42.4363403,91.1914171 67.5499481,82.6777579 68.5513622,76.8097776 C69.1571383,73.2601147 69.1571383,69.3156925 68.5513622,64.9765112 L90.0275045,78.5824165 C88.0862794,86.6951681 88.6578445,93.4035598 91.7421998,98.7075915 C94.826555,104.011623 100.889749,108.712739 109.931782,112.810938 C84.941806,134.468841 66.7437588,145.963089 55.3376402,147.29368 C38.2284625,149.289566 40.0451746,135.664305 53.601126,115.623984 C62.6384269,102.26377 62.6521414,93.3206965 53.6422696,88.7947646 Z" id="neck" fill="url(#linearGradient-19)"></path>
<path d="M91.5198327,15.1137142 C122.427882,62.6143647 127.72121,67.3544858 124.531729,82.5186079 C117.973967,113.696947 26.9637124,145.869769 15.9865662,118.807365 C5.0094199,91.7449607 30.169447,105.79345 28.9552824,82.5186079 C28.5100092,73.9829738 18.9657969,55.4206776 0.322645382,26.8317192 C46.605631,-3.28769478 77.0046935,-7.19369646 91.5198327,15.1137142 Z" id="Hair" fill="url(#linearGradient-20)" fill-rule="nonzero"></path>
<path d="M18.52397,22.8221759 L26.3777088,22.6866755 C40.9167324,19.5781837 55.0051028,21.7556253 68.64282,29.2190002 C82.2805371,36.6823752 87.8409453,45.2579212 85.3240447,54.9456382 L90.9852797,78.5144424 C89.035468,86.6600878 89.6025115,93.3939923 92.6864103,98.7161558 C95.7703091,104.038319 101.837043,108.752925 110.886612,112.859974 C85.8502474,134.621041 67.6217344,146.173864 56.2010724,147.518442 C39.0700795,149.53531 40.8995027,135.855923 54.4870433,115.727558 C63.5454037,102.308647 63.5660649,93.3309614 54.5490269,88.7945001 C46.02722,92.7178836 40.6291127,94.8336235 38.3547052,95.1417199 C35.2613935,95.5607469 25.9469154,82.6964232 19.4661632,67.2881981 C18.7992983,65.7027025 13.4541594,60.4514196 12.8571685,58.8237539 C11.5295724,55.2041294 14.590365,54.9607616 14.1510085,51.0344863 C13.8164505,48.0447345 11.0385239,44.0563416 11.6901363,39.1235209 C12.0974477,36.0401023 14.3753923,30.6063206 18.52397,22.8221759 Z" id="Face" fill="#F2A384" fill-rule="nonzero"></path>
</g>
<g id="Foot" transform="translate(122.000000, 327.000000)">
<path d="M58.9758456,303.381211 L61.9531146,321.905245 C58.3301915,326.836535 53.8568546,329.30218 48.533104,329.30218 C43.2093533,329.30218 38.4702382,328.0588 34.3157586,325.572042 L31.3332942,305.325284 L58.9758456,303.381211 Z" id="leg" fill="url(#linearGradient-20)" fill-rule="nonzero" transform="translate(46.643204, 316.341696) rotate(-360.000000) translate(-46.643204, -316.341696) "></path>
<path d="M151.317718,303.381211 L154.294987,321.905245 C150.672064,326.836535 146.198727,329.30218 140.874976,329.30218 C135.551226,329.30218 130.812111,328.0588 126.657631,325.572042 L123.675167,305.325284 L151.317718,303.381211 Z" id="leg" fill="url(#linearGradient-20)" fill-rule="nonzero" transform="translate(138.985077, 316.341696) rotate(-360.000000) translate(-138.985077, -316.341696) "></path>
<path d="M154.38765,319.364026 C156.646891,319.364026 156.646891,327.008725 156.745186,332.826983 C156.78097,334.945099 156.397901,338.171928 155.595979,342.50747 C155.267365,344.284113 153.820027,345.586499 152.105152,345.648688 C115.846863,346.963581 93.9988508,346.928067 93.9324638,345.542144 C91.0355967,336.082353 92.6136262,335.061974 109.05634,327.641209 C115.739751,324.624918 121.874626,323.184692 126.030965,320.708185 C127.452677,319.861074 130.432235,326.710083 140.260697,326.710083 C150.08916,326.710083 152.128409,319.364026 154.38765,319.364026 Z" id="Shoes" fill="url(#linearGradient-21)" fill-rule="nonzero" transform="translate(124.754333, 332.986474) rotate(-360.000000) translate(-124.754333, -332.986474) "></path>
<path d="M163.63397,0.759451044 C162.731363,21.0987003 162.731363,32.4468754 163.63397,34.8039763 C164.987881,38.3396276 157.048927,82.4523992 139.817109,167.142291 C141.292548,249.776139 153.579182,295.169289 152.105855,303.32174 C149.895864,315.550417 124.207567,315.55007 121.090361,306.712335 C119.012223,300.820511 110.412084,252.946869 95.2899435,163.091408 L92.6361059,92.6168146 C82.0617471,111.083051 67.271588,136.237044 48.2656286,168.078795 C51.3746216,255.720779 63.1648671,302.108378 59.0652083,307.241591 C55.4114137,311.816535 31.3332942,315.045647 29.8883842,307.242495 C15.2336722,246.784774 7.90710779,200.088953 7.90869092,167.155031 C7.91027405,134.22111 23.0024844,78.7559161 53.185322,0.759451044 L163.63397,0.759451044 Z" id="Pants" fill="url(#linearGradient-22)" fill-rule="nonzero" transform="translate(85.845301, 156.863883) rotate(-360.000000) translate(-85.845301, -156.863883) "></path>
<path d="M62.0457778,319.364026 C64.3050188,319.364026 64.3050188,327.008725 64.4033136,332.826983 C64.4390975,334.945099 64.0560285,338.171928 63.2541066,342.50747 C62.9254925,344.284113 61.4781543,345.586499 59.7632799,345.648688 C23.5049902,346.963581 1.65697835,346.928067 1.59059135,345.542144 C-1.30627567,336.082353 0.271753744,335.061974 16.7144677,327.641209 C23.3978784,324.624918 29.5327532,323.184692 33.6890925,320.708185 C35.1108045,319.861074 38.0903623,326.710083 47.918825,326.710083 C57.7472878,326.710083 59.7865369,319.364026 62.0457778,319.364026 Z" id="Shoes" fill="url(#linearGradient-21)" fill-rule="nonzero" transform="translate(32.412460, 332.986474) rotate(-360.000000) translate(-32.412460, -332.986474) "></path>
<path d="M48.2829436,168.049786 L47.918825,167.944152 L78.6327711,81.1089089 C80.6803675,82.8369734 85.3481458,86.672942 92.6361059,92.6168146 C82.0649585,111.077442 67.2805711,136.221766 48.2829436,168.049786 Z" id="Shadow" fill="url(#linearGradient-23)" fill-rule="nonzero" transform="translate(70.277465, 124.579347) rotate(-360.000000) translate(-70.277465, -124.579347) "></path>
<g id="Foot" transform="translate(112.000000, 327.000000)">
<path d="M58.9758456,303.381211 L61.9531146,321.905245 C58.3301915,326.836535 53.8568546,329.30218 48.533104,329.30218 C43.2093533,329.30218 38.4702382,328.0588 34.3157586,325.572042 L31.3332942,305.325284 L58.9758456,303.381211 Z" id="leg" fill="url(#linearGradient-21)" fill-rule="nonzero" transform="translate(46.643204, 316.341696) rotate(-360.000000) translate(-46.643204, -316.341696) "></path>
<path d="M151.317718,303.381211 L154.294987,321.905245 C150.672064,326.836535 146.198727,329.30218 140.874976,329.30218 C135.551226,329.30218 130.812111,328.0588 126.657631,325.572042 L123.675167,305.325284 L151.317718,303.381211 Z" id="leg" fill="url(#linearGradient-21)" fill-rule="nonzero" transform="translate(138.985077, 316.341696) rotate(-360.000000) translate(-138.985077, -316.341696) "></path>
<path d="M154.38765,319.364026 C156.646891,319.364026 156.646891,327.008725 156.745186,332.826983 C156.78097,334.945099 156.397901,338.171928 155.595979,342.50747 C155.267365,344.284113 153.820027,345.586499 152.105152,345.648688 C115.846863,346.963581 93.9988508,346.928067 93.9324638,345.542144 C91.0355967,336.082353 92.6136262,335.061974 109.05634,327.641209 C115.739751,324.624918 121.874626,323.184692 126.030965,320.708185 C127.452677,319.861074 130.432235,326.710083 140.260697,326.710083 C150.08916,326.710083 152.128409,319.364026 154.38765,319.364026 Z" id="Shoes" fill="url(#linearGradient-22)" fill-rule="nonzero" transform="translate(124.754333, 332.986474) rotate(-360.000000) translate(-124.754333, -332.986474) "></path>
<path d="M163.63397,0.759451044 C162.731363,21.0987003 162.731363,32.4468754 163.63397,34.8039763 C164.987881,38.3396276 157.048927,82.4523992 139.817109,167.142291 C141.292548,249.776139 153.579182,295.169289 152.105855,303.32174 C149.895864,315.550417 124.207567,315.55007 121.090361,306.712335 C119.012223,300.820511 110.412084,252.946869 95.2899435,163.091408 L92.6361059,92.6168146 C82.0617471,111.083051 67.271588,136.237044 48.2656286,168.078795 C51.3746216,255.720779 63.1648671,302.108378 59.0652083,307.241591 C55.4114137,311.816535 31.3332942,315.045647 29.8883842,307.242495 C15.2336722,246.784774 7.90710779,200.088953 7.90869092,167.155031 C7.91027405,134.22111 23.0024844,78.7559161 53.185322,0.759451044 L163.63397,0.759451044 Z" id="Pants" fill="url(#linearGradient-23)" fill-rule="nonzero" transform="translate(85.845301, 156.863883) rotate(-360.000000) translate(-85.845301, -156.863883) "></path>
<path d="M62.0457778,319.364026 C64.3050188,319.364026 64.3050188,327.008725 64.4033136,332.826983 C64.4390975,334.945099 64.0560285,338.171928 63.2541066,342.50747 C62.9254925,344.284113 61.4781543,345.586499 59.7632799,345.648688 C23.5049902,346.963581 1.65697835,346.928067 1.59059135,345.542144 C-1.30627567,336.082353 0.271753744,335.061974 16.7144677,327.641209 C23.3978784,324.624918 29.5327532,323.184692 33.6890925,320.708185 C35.1108045,319.861074 38.0903623,326.710083 47.918825,326.710083 C57.7472878,326.710083 59.7865369,319.364026 62.0457778,319.364026 Z" id="Shoes" fill="url(#linearGradient-24)" fill-rule="nonzero" transform="translate(32.412460, 332.986474) rotate(-360.000000) translate(-32.412460, -332.986474) "></path>
<path d="M48.2829436,168.049786 L47.918825,167.944152 L78.6327711,81.1089089 C80.6803675,82.8369734 85.3481458,86.672942 92.6361059,92.6168146 C82.0649585,111.077442 67.2805711,136.221766 48.2829436,168.049786 Z" id="Shadow" fill="url(#linearGradient-25)" fill-rule="nonzero" transform="translate(70.277465, 124.579347) rotate(-360.000000) translate(-70.277465, -124.579347) "></path>
<path d="M141.289221,44.1715291 L123.661272,155.749552 C122.723291,161.686602 122.667953,167.729685 123.497052,173.682916 L141.289221,301.437139" id="Texture" stroke="#1542AB" transform="translate(132.101585, 172.804334) rotate(-360.000000) translate(-132.101585, -172.804334) "></path>
</g>
<path d="M208.443632,178.348628 C202.252442,188.222023 197.960821,194.853689 205.503255,198.515981 C213.04569,202.178273 230.140563,193.387217 256.787874,172.142812 C288.99637,184.390598 292.302495,194.117643 298.900438,201.323947 C305.498381,208.530251 281.16737,343.114133 271.432126,352.018461 C257.302695,364.941925 235.956033,369.427853 210.073407,365.943125 C210.073407,365.943125 210.073407,365.943125 210.073407,365.943125 L210.073407,365.943125 C191.682489,363.467049 178.78096,346.551009 181.257036,328.160091 C181.316084,327.721511 181.383792,327.28414 181.460118,326.848235 C184.592116,308.961211 186.158231,297.89083 186.158461,293.637089 C186.158946,284.664775 181.403788,262.764714 171.892988,227.936906 L192.842983,184.431519 L208.443632,178.348628 Z" id="Body" fill="url(#linearGradient-24)" fill-rule="nonzero" transform="translate(235.956033, 269.611867) rotate(-360.000000) translate(-235.956033, -269.611867) "></path>
<g id="Jacket" transform="translate(251.000000, 172.000000)" fill-rule="nonzero">
<path d="M198.514674,178.207787 C192.329577,188.084316 188.042179,194.718087 195.577191,198.381542 C203.112203,202.044997 220.190253,193.25115 246.81134,172 C278.988141,184.251674 282.291012,193.981808 288.882461,201.1904 C295.473911,208.398992 271.166845,343.025602 261.441181,351.932756 C247.325655,364.860323 226,369.347675 200.142846,365.861841 C200.142846,365.861841 200.142846,365.861841 200.142846,365.861841 L200.142846,365.861841 C181.762791,363.384004 168.871496,346.475342 171.349333,328.095287 C171.407882,327.660983 171.474927,327.227867 171.550429,326.796188 C174.684202,308.87902 176.251204,297.791241 176.251434,293.53285 C176.251919,284.557687 171.501441,262.650673 162,227.811808 L182.929378,184.292609 L198.514674,178.207787 Z" id="Body" fill="url(#linearGradient-26)" fill-rule="nonzero" transform="translate(226.000000, 269.500000) rotate(-360.000000) translate(-226.000000, -269.500000) "></path>
<g id="Jacket" transform="translate(241.000000, 172.000000)" fill-rule="nonzero">
<path d="M7.46619169,171.912784 C21.9222558,221.082936 -1.64656217,278.224193 3.88325281,305.360718 C31.4342203,308.244869 55.4915612,322.256529 76.0552756,347.395699 C84.7475466,336.206346 88.6426905,311.634317 87.7407073,273.679613 C86.3877325,216.747557 72.8192071,213.581352 70.726222,187.66495 C69.3308986,170.387349 69.3308986,148.883548 70.726222,123.153546 L58.1893857,24.9342098 L7.46619169,0.871117729 C-2.1711844,82.1187936 -2.1711844,139.132682 7.46619169,171.912784 Z" fill="url(#linearGradient-11)"></path>
<path d="M69.7383608,150.766419 C58.3148218,139.124184 47.0567415,122.013291 38.2812569,96.9641484 C29.790609,72.7280566 38.6498745,42.7599417 50.9191432,21.4852055 L58.1893857,24.9342098 L70.726222,123.153546 C70.1936962,132.973413 69.8644091,142.177704 69.7383608,150.766419 Z" id="Shadow" fill="#EFB84F" opacity="0.5"></path>
</g>
<g id="Hand" transform="translate(348.018482, 253.470307) scale(-1, 1) rotate(39.000000) translate(-348.018482, -253.470307) translate(290.518482, 135.970307)" fill-rule="nonzero">
<g id="Hand" transform="translate(338.500000, 253.500000) scale(-1, 1) rotate(39.000000) translate(-338.500000, -253.500000) translate(281.000000, 136.000000)" fill-rule="nonzero">
<path d="M32.3540108,222.619016 L29.1648307,212.385957 C21.0768949,201.125714 17.1942873,195.013206 17.5170079,194.048435 C17.8397285,193.083665 20.0270844,194.307698 24.0790756,197.720537 C23.0138895,189.982991 22.8228399,185.72039 23.5059269,184.932733 C24.1890139,184.145077 26.0689251,187.097382 29.1456605,193.789648 C29.4792604,185.326483 30.1775365,180.898732 31.2404889,180.506395 C32.3034412,180.114058 33.8993451,184.218699 36.0282005,192.820318 C37.020945,185.236373 38.0341381,181.876606 39.0677797,182.741019 C40.1014212,183.605432 41.0384148,189.595949 41.8787604,200.712571 C45.971393,197.139921 48.2519589,195.990554 48.720458,197.26447 C49.188957,198.538386 47.9819103,202.978137 45.0993179,210.583725 C47.5134113,242.815104 43.2649756,246.826868 32.3540108,222.619016 Z" fill="#F2A384" transform="translate(33.158570, 209.337273) scale(-1, -1) rotate(68.000000) translate(-33.158570, -209.337273) "></path>
<path d="M54.9063775,67.7024074 C39.9448102,45.3300206 39.9448102,29.5171719 54.9063775,20.2638613 C66.6909875,12.9754099 72.6947959,-0.691423531 75.1154773,0.137475026 C77.3046881,0.887112577 76.0224279,15.549747 83.2279553,20.2638613 C101.416494,32.1634552 123.984489,89.0702256 111.018513,126.170819 C87.2362967,194.220796 65.6914112,195.633563 52.3845427,204.181862 C43.513297,209.880728 38.4166992,206.147045 37.0947492,192.980811 C62.0993416,156.373573 73.6263982,132.423994 71.6759188,121.132075 C69.7254395,109.840156 64.1355924,92.0302667 54.9063775,67.7024074 Z" id="Sleeve" fill="url(#linearGradient-11)"></path>
</g>
<path d="M28.7036684,156.347768 L25.5470999,146.06384 C17.5418691,134.74762 13.6989639,128.604726 14.0183845,127.635159 C14.337805,126.665592 16.5027936,127.895711 20.5133504,131.325515 C19.4590565,123.549505 19.2699605,119.265714 19.9460625,118.474142 C20.6221644,117.68257 22.4828522,120.649551 25.5281258,127.375085 C25.8583144,118.869849 26.5494501,114.420087 27.601533,114.0258 C28.653616,113.631512 30.2332006,117.756558 32.3402869,126.400937 C33.3228799,118.779291 34.3257123,115.402822 35.3487842,116.271532 C36.371856,117.140242 37.2992682,123.160539 38.1310206,134.332423 C42.1818032,130.742013 44.4390486,129.586933 44.902757,130.867181 C45.3664653,132.14743 44.1717615,136.609252 41.3186457,144.252649 C43.7080532,176.644254 39.5030608,180.675961 28.7036684,156.347768 Z" id="Hand" fill="#F2A384" fill-rule="nonzero" transform="translate(29.500000, 143.000000) rotate(-33.000000) translate(-29.500000, -143.000000) "></path>
<g id="Jacket" transform="translate(39.000000, 148.000000)">
<mask id="mask-26" fill="white">
<use xlink:href="#path-25"></use>
</mask>
<use fill="url(#linearGradient-11)" fill-rule="nonzero" xlink:href="#path-25"></use>
<path d="M122.244724,102.796172 C122.382272,94.9197856 123.637941,88.5214871 126.011731,83.6012765 C128.385522,78.6810659 129.051182,75.7816561 128.008712,74.9030471 C102.114202,87.6887971 80.437712,90.5882069 62.9792422,83.6012765 C45.5207723,76.6143461 49.917967,86.1987775 76.1708261,112.354571 L122.244724,102.796172 Z" id="Shadow" fill="#EFB84F" fill-rule="nonzero" opacity="0.5" mask="url(#mask-26)"></path>
<g id="marker" transform="translate(16.831915, 117.156447) rotate(-80.000000) translate(-16.831915, -117.156447) translate(1.331915, 106.656447)" fill-rule="nonzero">
<path d="M24.0883906,2.62465069 C25.142049,1.72177259 30.1873062,-0.751302272 30.7249052,1.14491739 C31.0833076,2.40906651 29.4257776,4.04567219 25.7523516,6.05466157 C23.9405901,4.36989019 23.3859183,3.22654784 24.0883906,2.62465069 Z" id="Shape" fill="#BA96FF"></path>
<path d="M3.22061673,11.7921676 L24.0593523,1.59099472 C25.3997932,0.934804557 27.0155252,1.37547713 27.8437953,2.62310884 C28.6484553,3.8350995 28.3485055,5.47174381 27.1673427,6.3147998 L8.00255532,19.9938391 C5.8748623,21.512512 2.92725857,21.007004 1.41894047,18.8646563 C1.34106917,18.7540866 1.26793188,18.6401959 1.19973832,18.5232881 C-0.130545464,16.2433252 0.626714661,13.3092559 2.8911843,11.9698518 C2.99862811,11.9062753 3.1085288,11.8469966 3.22061673,11.7921676 Z" id="Shape" fill="#3E4886"></path>
</g>
<path d="M281.421906,132.172202 C277.883017,135.265109 330.672046,120.417699 330.305119,92.7603957 C329.938192,65.1030924 307.209459,65.7535406 300.938878,63.7200761 C294.668297,61.6866116 268.219372,20.0842642 230.586063,32.8728949 C211.879262,39.2298797 210.384894,55.1071302 193.116529,74.061951 C186.265369,81.5822068 174.343514,77.5025151 167.323002,85.3442702 C160.302491,93.1860253 156.577617,105.415864 152.379781,112.277621 C146.72317,121.523882 122.72038,127.297325 124.695523,145.910835 C126.670666,164.524344 147.349284,171.017889 176.65801,175.071728 C190.203049,176.945212 189.208398,161.029878 195.649074,156.492884 C203.144719,151.212741 213.715876,152.881656 217.298038,148.198586 C223.958194,139.49156 219.898328,137.476745 222.869379,132.018237 C224.85008,128.379232 227.762189,125.010517 231.605708,121.912091 C225.222144,118.967461 224.054013,113.754071 228.101314,106.271921 C234.172265,95.0486968 244.532494,100.70739 244.532494,110.595016 L249.97026,104.240517 C256.547361,108.14474 263.130214,110.269658 269.71882,110.615271 C276.307425,110.960885 281.840782,110.722628 286.318889,109.9005 C286.858257,121.536875 285.225929,128.960776 281.421906,132.172202 Z" id="Face" fill="url(#linearGradient-19)" fill-rule="nonzero" transform="translate(227.443677, 102.829906) scale(-1, 1) rotate(-19.000000) translate(-227.443677, -102.829906) "></path>
<path d="M18.4413014,153.323826 L15.2847329,143.039897 C14.7455707,134.548478 14.6356999,129.817985 14.9551205,128.848418 C15.274541,127.878851 15.0257204,126.922357 14.2086588,125.978934 C14.2372901,125.685312 14.5896568,125.142715 15.2657587,124.351143 C16.2799116,123.163785 24.0573358,118.490294 25.6354602,117.898863 C26.6875432,117.504575 25.5016964,119.330619 22.0779198,123.376995 C23.0605128,115.755348 24.0633453,112.37888 25.0864171,113.24759 C26.109489,114.116299 27.0369011,120.136597 27.8686535,131.308481 C31.9194361,127.718071 34.1766816,126.56299 34.6403899,127.843239 C35.1040982,129.123487 33.9093944,133.58531 31.0562786,141.228706 C33.4456861,173.620312 29.2406937,177.652018 18.4413014,153.323826 Z" id="Hand" fill="#F2A384" fill-rule="nonzero" transform="translate(24.473146, 141.045161) rotate(-33.000000) translate(-24.473146, -141.045161) "></path>
<g id="Jacket" transform="translate(29.000000, 148.000000)">
<mask id="mask-28" fill="white">
<use xlink:href="#path-27"></use>
</mask>
<use fill="url(#linearGradient-11)" fill-rule="nonzero" xlink:href="#path-27"></use>
<path d="M122.244724,102.796172 C122.382272,94.9197856 123.637941,88.5214871 126.011731,83.6012765 C128.385522,78.6810659 129.051182,75.7816561 128.008712,74.9030471 C102.114202,87.6887971 80.437712,90.5882069 62.9792422,83.6012765 C45.5207723,76.6143461 49.917967,86.1987775 76.1708261,112.354571 L122.244724,102.796172 Z" id="Shadow" fill="#EFB84F" fill-rule="nonzero" opacity="0.5" mask="url(#mask-28)"></path>
</g>
<path d="M272.049938,131.88511 C268.506348,134.98253 321.365508,120.113456 320.998093,92.415797 C320.630679,64.7181382 297.871751,65.3695356 291.592839,63.333104 C285.313927,61.2966724 258.829865,19.6336219 221.14656,32.4409128 C202.414907,38.8071733 200.918554,54.7075907 183.627248,73.690069 C176.766986,81.2212977 164.829293,77.1356532 157.799455,84.9888504 C150.769617,92.8420476 147.039793,105.089731 142.836381,111.9615 C137.172255,121.221252 113.137578,127.003121 115.115345,145.643789 C117.093112,164.284458 137.799201,170.787478 167.146864,174.847232 C180.709898,176.723449 179.713925,160.784893 186.163158,156.241279 C193.66876,150.953431 204.253961,152.624782 207.840882,147.934878 C214.509886,139.215148 210.444627,137.197393 213.419625,131.730921 C215.402957,128.086606 218.318935,124.712975 222.167559,121.610028 C215.775516,118.661101 214.605833,113.440104 218.65851,105.947037 C224.737527,94.707437 235.111519,100.374387 235.111519,110.276441 L240.556509,103.912669 C247.142348,107.822589 253.733947,109.950607 260.331305,110.296725 C266.928664,110.642843 272.469371,110.404238 276.953427,109.580911 C277.493512,121.234265 275.859016,128.668998 272.049938,131.88511 Z" id="Face" fill="url(#linearGradient-20)" fill-rule="nonzero" transform="translate(218.000000, 102.500000) scale(-1, 1) rotate(-19.000000) translate(-218.000000, -102.500000) "></path>
</g>
<g id="vase" transform="translate(1062.000000, 313.000000)" fill-rule="nonzero">
<path d="M47.4027578,116.138641 L57.469841,173 L42.2032035,119.262586 C35.562935,116.041411 20.5716745,110.344371 16.2704753,105.306211 C11.9692761,100.268052 8.49249224,92.6012424 5.84012364,82.3057833 L18.4503806,99.2760535 L5.9275125,79.5888171 C3.54633336,75.2787453 1.89381873,71.2943057 0.969968831,67.6354982 C0.0461188183,63.9766907 -0.2177882,61.0516314 0.178247775,58.8603202 L11.9533212,73.3689108 L0.782457036,56.0168646 C1.31389832,42.1670089 1.80536954,32.7953423 2.25687083,27.9018648 C2.59780459,24.2067438 6.81039134,25.2461393 7.24548591,22.5806356 C7.6949432,19.8271415 4.37006785,13.4032977 4.92000525,11.74852 C6.6741777,6.47016303 8.97509972,2.71446225 11.8227714,0.481417635 C16.201087,-2.95190445 20.8204107,12.8197077 25.516446,21.1263311 C26.475675,22.8230716 27.2809497,13.5466842 28.2616603,15.5112609 C35.7346071,30.4811997 43.8717048,52.1337009 53.2902163,63.8089983 C64.4273707,77.6147453 61.1784087,102.247685 47.4027578,116.138641 Z" id="Combined-Shape-Copy" fill="url(#linearGradient-27)"></path>
<g id="vase" transform="translate(1063.000000, 313.000000)" fill-rule="nonzero">
<path d="M47.4027578,116.138641 L57.469841,173 L42.2032035,119.262586 C35.562935,116.041411 20.5716745,110.344371 16.2704753,105.306211 C11.9692761,100.268052 8.49249224,92.6012424 5.84012364,82.3057833 L18.4503806,99.2760535 L5.9275125,79.5888171 C3.54633336,75.2787453 1.89381873,71.2943057 0.969968831,67.6354982 C0.0461188183,63.9766907 -0.2177882,61.0516314 0.178247775,58.8603202 L11.9533212,73.3689108 L0.782457036,56.0168646 C1.31389832,42.1670089 1.80536954,32.7953423 2.25687083,27.9018648 C2.59780459,24.2067438 6.81039134,25.2461393 7.24548591,22.5806356 C7.6949432,19.8271415 4.37006785,13.4032977 4.92000525,11.74852 C6.6741777,6.47016303 8.97509972,2.71446225 11.8227714,0.481417635 C16.201087,-2.95190445 20.8204107,12.8197077 25.516446,21.1263311 C26.475675,22.8230716 27.2809497,13.5466842 28.2616603,15.5112609 C35.7346071,30.4811997 43.8717048,52.1337009 53.2902163,63.8089983 C64.4273707,77.6147453 61.1784087,102.247685 47.4027578,116.138641 Z" id="Combined-Shape-Copy" fill="url(#linearGradient-29)"></path>
<path d="M38.0238115,95.6900008 L26.9999999,82.5041515 L27.4830438,82.1320755 L37.8303957,94.5087949 C34.0087205,71.2849765 30.2453456,55.2628009 26.5482488,46.4586834 L14.6470588,35.0075404 L15.0852904,34.5849056 L25.9026634,44.9932223 C25.5830087,44.303295 25.263855,43.6675606 24.9452075,43.0860295 L13,21.2860495 L13.5544088,21 L25.4996163,42.79998 C30.5723687,52.0577431 35.7323788,74.7487013 41,110.914732 L40.3782721,111 C39.5910621,105.595233 38.8062191,100.491853 38.0238115,95.6900008 Z" id="Combined-Shape-Copy-path" fill="#319CA3"></path>
<path d="M60.5137977,112.590042 L67.29143,104.398062 L66.9944462,104.166903 L60.6327131,111.856193 C62.9823458,97.4279196 65.2961347,87.4738142 67.5691746,82.0040756 L74.8862346,74.8898179 L74.6168021,74.6272475 L67.9660918,81.0936278 C68.1626211,80.6649963 68.3588424,80.2700332 68.5547524,79.9087451 L75.8988752,66.3650601 L75.558015,66.187346 L68.2138922,79.7310309 C65.0950751,85.4826063 61.9226106,99.5798297 58.6839848,122.048719 L59.066234,122.101693 C59.5502245,118.743871 60.0327598,115.573291 60.5137977,112.590042 Z M54.7682993,124.831414 C46.2733146,116.239897 44.2697881,101.004496 51.1376999,92.465681 C56.945782,85.2445433 61.963659,71.8525339 66.5719761,62.59367 C67.1767477,61.378585 67.6733338,67.1160038 68.2648583,66.0665747 C71.1607468,60.9289521 74.0093297,51.1742556 76.709291,53.2977554 C78.4653552,54.678887 79.8842571,57.0017771 80.9659968,60.2664257 C81.3051248,61.2899009 79.2547851,65.2630297 79.5319503,66.9660579 C79.8002587,68.6146641 82.3980205,67.9718011 82.608263,70.2572227 C82.8866887,73.2838244 83.1897627,79.080173 83.5174848,87.6462688 L76.6287853,98.3784593 L83.8900805,89.404938 C84.1343027,90.7602576 83.97156,92.5693982 83.4018526,94.8323602 C82.8321451,97.095322 81.8130945,99.5596864 80.3447006,102.225453 L72.6222653,114.401952 L80.3985904,103.905889 C78.7629631,110.273601 76.6189464,115.0155 73.9665402,118.131587 C71.3141341,121.247675 62.0695234,124.771277 57.9746912,126.763565 L48.5602647,160 L54.7682993,124.831414 Z" id="Combined-Shape-Copy" fill="url(#linearGradient-28)"></path>
<polygon fill="url(#linearGradient-29)" points="11 143 81 143 65.4444444 189 26.5555556 189"></polygon>
<rect fill="url(#linearGradient-30)" x="9" y="142" width="72" height="14"></rect>
<path d="M60.5137977,112.590042 L67.29143,104.398062 L66.9944462,104.166903 L60.6327131,111.856193 C62.9823458,97.4279196 65.2961347,87.4738142 67.5691746,82.0040756 L74.8862346,74.8898179 L74.6168021,74.6272475 L67.9660918,81.0936278 C68.1626211,80.6649963 68.3588424,80.2700332 68.5547524,79.9087451 L75.8988752,66.3650601 L75.558015,66.187346 L68.2138922,79.7310309 C65.0950751,85.4826063 61.9226106,99.5798297 58.6839848,122.048719 L59.066234,122.101693 C59.5502245,118.743871 60.0327598,115.573291 60.5137977,112.590042 Z M54.7682993,124.831414 C46.2733146,116.239897 44.2697881,101.004496 51.1376999,92.465681 C56.945782,85.2445433 61.963659,71.8525339 66.5719761,62.59367 C67.1767477,61.378585 67.6733338,67.1160038 68.2648583,66.0665747 C71.1607468,60.9289521 74.0093297,51.1742556 76.709291,53.2977554 C78.4653552,54.678887 79.8842571,57.0017771 80.9659968,60.2664257 C81.3051248,61.2899009 79.2547851,65.2630297 79.5319503,66.9660579 C79.8002587,68.6146641 82.3980205,67.9718011 82.608263,70.2572227 C82.8866887,73.2838244 83.1897627,79.080173 83.5174848,87.6462688 L76.6287853,98.3784593 L83.8900805,89.404938 C84.1343027,90.7602576 83.97156,92.5693982 83.4018526,94.8323602 C82.8321451,97.095322 81.8130945,99.5596864 80.3447006,102.225453 L72.6222653,114.401952 L80.3985904,103.905889 C78.7629631,110.273601 76.6189464,115.0155 73.9665402,118.131587 C71.3141341,121.247675 62.0695234,124.771277 57.9746912,126.763565 L48.5602647,160 L54.7682993,124.831414 Z" id="Combined-Shape-Copy" fill="url(#linearGradient-30)"></path>
<polygon fill="url(#linearGradient-31)" points="11 143 81 143 65.4444444 189 26.5555556 189"></polygon>
<rect fill="url(#linearGradient-32)" x="9" y="142" width="72" height="14"></rect>
</g>
</g>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 36 KiB

2
src/images/web-development-company.svg
View File

@@ -25,7 +25,7 @@
<stop stop-color="#6B9AD9" offset="100%"></stop>
</linearGradient>
<linearGradient x1="47.6375401%" y1="86.4527757%" x2="47.6375401%" y2="6.77016697%" id="linearGradient-6">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#FFFFFF" stop-opacity="0.3" offset="0%"></stop>
<stop stop-color="#5763AB" stop-opacity="0.3" offset="100%"></stop>
</linearGradient>
<linearGradient x1="157.419759%" y1="-39.6921362%" x2="128.337769%" y2="255.279145%" id="linearGradient-7">
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 65 KiB

4
src/pages/index.js
View File

@@ -75,7 +75,7 @@ const IndexPage = ({ ...props }) => (
standard
text="More About What We Do"
url="/services"
classes="mb-8 lg:mb-24 rounded-full hover:shadow-md text-grey-darker hover:shadow"
classes="font-medium mb-8 lg:mb-24 rounded-full hover:shadow-md text-grey-darker hover:shadow"
/>
</div>
</section>
@@ -107,7 +107,7 @@ const IndexPage = ({ ...props }) => (
filled
text="Let's Get In Touch"
url="/contact"
classes="text-white font-normal shadow hover:shadow-md rounded-full mt-2 font-light bg-teal hover:bg-teal-dark"
classes="text-white font-medium shadow hover:shadow-md rounded-full mt-2 font-light bg-teal hover:bg-teal-dark"
/>
</section>

21
src/pages/services.js
View File

@@ -112,22 +112,23 @@ const ServicesPage = () => (
</div>
<img
src={WebdevServices}
className="hidden lg:block w-full mx-auto text-center content-center align-center p-8"
className="hidden lg:block w-full max-h-35 mx-auto text-center content-center align-center p-8"
alt="Fullstack Web Development Agency"
/>
</div>
<div className="p-8 my-4 bg-white border-bottom-saburly">
<h3 className="my-1 text-black">Emerging Technologies</h3>
<p className="font-light leading-normal text-black-light text-lg">
We harness a wide array of emerging technologies, such as AR/VR, AI
technologies, Machine Learning and Blockchain, pushing the
boundaries of user experience across physical and digital. Keeping
track of emerging technologies is important to us so that we can
deliver forward-thinking solutions, but we understand that
technologies as just tools. That's why we're keen on being framework
agnostic and selecting the best tools for your needs. Below are some
of the technologies that we're currently working with on a daily
basis.
We harness a wide array of emerging technologies, such as{' '}
<strong>AR/VR</strong>, <strong>AI technologies</strong>,{' '}
<strong>Machine Learning</strong> and <strong>Blockchain</strong>,
pushing the boundaries of user experience across physical and
digital. Keeping track of emerging technologies is important to us
so that we can deliver forward-thinking solutions, but we understand
that technologies as just tools. That's why we're keen on being
framework agnostic and selecting the best tools for your needs.
Below are some of the technologies that we're currently working with
on a daily basis.
</p>
<Technologies />
</div>

8
src/styles/general.css
View File

@@ -122,3 +122,11 @@ body {
.saburly-overlay-shadow {
background-color: RGBA(0, 0, 0, 0.1);
}
.saburly-text-intro {
color: #1f2443;
}
h2 span {
color: #5763ab;
}

80
src/styles/index.css
View File

@@ -3370,6 +3370,10 @@ table {
margin-left: 1px;
}
.max-h-35 {
max-height: 35rem;
}
.max-h-xs {
max-height: 20rem;
}
@@ -5774,6 +5778,18 @@ table {
z-index: 50;
}
.z--3 {
z-index: -3;
}
.z--2 {
z-index: -2;
}
.z--1 {
z-index: -1;
}
.z-auto {
z-index: auto;
}
@@ -8508,6 +8524,10 @@ table {
margin-left: 1px;
}
.sm\:max-h-35 {
max-height: 35rem;
}
.sm\:max-h-xs {
max-height: 20rem;
}
@@ -10896,6 +10916,18 @@ table {
z-index: 50;
}
.sm\:z--3 {
z-index: -3;
}
.sm\:z--2 {
z-index: -2;
}
.sm\:z--1 {
z-index: -1;
}
.sm\:z-auto {
z-index: auto;
}
@@ -13631,6 +13663,10 @@ table {
margin-left: 1px;
}
.md\:max-h-35 {
max-height: 35rem;
}
.md\:max-h-xs {
max-height: 20rem;
}
@@ -16019,6 +16055,18 @@ table {
z-index: 50;
}
.md\:z--3 {
z-index: -3;
}
.md\:z--2 {
z-index: -2;
}
.md\:z--1 {
z-index: -1;
}
.md\:z-auto {
z-index: auto;
}
@@ -18754,6 +18802,10 @@ table {
margin-left: 1px;
}
.lg\:max-h-35 {
max-height: 35rem;
}
.lg\:max-h-xs {
max-height: 20rem;
}
@@ -21142,6 +21194,18 @@ table {
z-index: 50;
}
.lg\:z--3 {
z-index: -3;
}
.lg\:z--2 {
z-index: -2;
}
.lg\:z--1 {
z-index: -1;
}
.lg\:z-auto {
z-index: auto;
}
@@ -23877,6 +23941,10 @@ table {
margin-left: 1px;
}
.xl\:max-h-35 {
max-height: 35rem;
}
.xl\:max-h-xs {
max-height: 20rem;
}
@@ -26265,6 +26333,18 @@ table {
z-index: 50;
}
.xl\:z--3 {
z-index: -3;
}
.xl\:z--2 {
z-index: -2;
}
.xl\:z--1 {
z-index: -1;
}
.xl\:z-auto {
z-index: auto;
}

4
tailwind.config.js
View File

@@ -625,6 +625,7 @@ module.exports = {
*/
maxHeight: {
'35': '35rem',
xs: '20rem',
sm: '30rem',
md: '40rem',
@@ -770,6 +771,9 @@ module.exports = {
*/
zIndex: {
'-3': -3,
'-2': -2,
'-1': -1,
auto: 'auto',
'0': 0,
'10': 10,