Restructuring and styling services and index pages

This commit is contained in:
Moris Zen
2018-08-08 18:10:40 +02:00
parent 53e87a903b
commit 955b05667e
12 changed files with 419 additions and 145 deletions

View File

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

View File

@@ -3,8 +3,8 @@ import Link from 'gatsby-link'
const InfoBox = ({ ...props }) => (
<div className={`${props.classes}`}>
<h2>{props.headline}</h2>
<p className="leading-normal">{props.text}</p>
<h2 className="text-black font-medium">{props.headline}</h2>
<p className="text-black-light leading-normal font-light">{props.text}</p>
</div>
)

View File

@@ -11,7 +11,7 @@ const IntroDefault = ({ ...props }) => (
className={`
${
props.light ? headlineDark : headlineLight
} opacity-50 text-sm font-light uppercase pt-2 pb-1`}
} opacity-50 text-sm font-light text-black uppercase pt-2 pb-1`}
>
{props.intro}
</h3>
@@ -19,7 +19,7 @@ const IntroDefault = ({ ...props }) => (
{props.headline && (
<h1
className={`${props.light ? headlineDark : ''}
font-normal pt-1 pb-2`}
font-normal text-black pt-1 pb-2`}
>
{props.headline}
</h1>
@@ -27,7 +27,7 @@ const IntroDefault = ({ ...props }) => (
{props.text && (
<p
className={`${props.light ? headlineDark : ''}
font-light leading-normal opacity-70`}
font-light text-black-light leading-normal`}
>
{props.text}
</p>

View File

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

View File

@@ -10,7 +10,8 @@ import UXResearch from '../images/ux-research.svg'
import UnitIntegration from '../images/unit-and-integration-testing.svg'
const WorkStyle = ({ ...props }) => (
<section className="container rounded overflow-hidden shadow-md mx-auto text-center my-4 bg-white">
<section className="container rounded overflow-hidden border-bottom-saburly mx-auto my-4 bg-white">
{props.children}
<div className="mx-auto text-center border-grey-lighter">
<div className="flex flex-wrap text-grey-darker">
<div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">

View File

@@ -0,0 +1,72 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="598px" height="322px" viewBox="0 0 598 322" 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>Group 21</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50%" y1="80.7133827%" x2="4.41921906%" y2="0.703110787%" id="linearGradient-1">
<stop stop-color="#6955B0" offset="0%"></stop>
<stop stop-color="#9687C7" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="76.9888796%" y1="16.7734139%" x2="-11.6510841%" y2="73.2727713%" id="linearGradient-2">
<stop stop-color="#72669D" offset="0%"></stop>
<stop stop-color="#ADA7C7" offset="100%"></stop>
</linearGradient>
<linearGradient x1="76.9888796%" y1="16.7734139%" x2="-11.6510841%" y2="73.2727713%" id="linearGradient-3">
<stop stop-color="#EAE9F1" offset="0%"></stop>
<stop stop-color="#ECE7F9" offset="100%"></stop>
</linearGradient>
<linearGradient x1="15.4820432%" y1="76.2997855%" x2="100%" y2="25.92039%" id="linearGradient-4">
<stop stop-color="#ADA7C7" offset="0%"></stop>
<stop stop-color="#EAE9F1" offset="100%"></stop>
</linearGradient>
<linearGradient x1="43.4030925%" y1="6.063533%" x2="96.6732198%" y2="100%" id="linearGradient-5">
<stop stop-color="#5640A6" offset="0%"></stop>
<stop stop-color="#B4AAD7" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-6">
<stop stop-color="#DBD5ED" offset="0%"></stop>
<stop stop-color="#C1B8DF" offset="84.680827%"></stop>
<stop stop-color="#B4AAD7" offset="100%"></stop>
</linearGradient>
</defs>
<g id="verson-2/desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop/Services" transform="translate(-1018.000000, -3360.000000)">
<g id="Group-21" transform="translate(1010.000000, 3360.000000)">
<g id="Group-26" transform="translate(0.000000, 122.000000)">
<g id="Group-13">
<path d="M108.20433,228.789239 C105.576852,234.961148 105.748368,258.527052 95.2384548,255.441097 C84.7285419,252.355143 79.3041785,227.420679 77.5504176,221.074353 C76.3812436,216.843468 74.9215335,203.985324 73.1712872,182.49992 C76.897106,178.670966 80.5403735,175.86005 84.1010895,174.067172 C81.144069,171.750225 78.1422434,169.112119 76.9072917,166.658715 C74.7620064,162.396805 73.0279102,155.911253 71.705003,147.202057 L77.994551,161.557648 L71.7485894,144.903705 C70.5609419,141.257704 69.7367264,137.887163 69.2759428,134.792083 C68.8151593,131.697003 68.6835319,129.22262 68.8810605,127.368933 L74.7540487,139.642126 L69.1824187,124.96358 C69.4474827,113.247629 69.6926111,105.319894 69.9178038,101.180374 C70.0878495,98.054576 72.188938,98.9338275 72.4059477,96.679009 C72.6301211,94.349757 70.9717914,88.9156613 71.2460806,87.515842 C72.1209995,83.0507432 73.2686176,79.8736987 74.6889351,77.9847084 C76.8726833,75.0803724 79.1766377,88.4219874 81.5188533,95.4487751 C81.9972826,96.8840918 82.398925,89.0369556 82.8880686,90.6988419 C86.6153088,103.362301 90.673804,121.678712 95.3714228,131.555148 C96.9194102,134.80969 97.9101677,138.775518 98.3853545,143.057755 C99.7537878,138.227955 101.036196,133.082991 102.260955,128.92182 C102.564437,127.890723 102.813631,132.759379 103.110467,131.868855 C104.563664,127.509174 105.993124,119.23154 107.348002,121.033498 C108.22922,122.205498 108.941245,124.176654 109.484077,126.946968 C109.654256,127.815468 108.625367,131.186983 108.764453,132.632138 C108.899093,134.031111 110.202687,133.485591 110.30819,135.424953 C110.447908,137.993264 110.599994,142.911926 110.76445,150.180939 L107.307603,159.288054 L110.951424,151.673309 C111.073978,152.823405 110.992311,154.358605 110.706424,156.278908 C110.420537,158.199211 109.909163,160.29042 109.172302,162.552534 L105.297075,172.88526 L109.199345,163.978518 C108.422573,169.092299 107.417309,172.97043 106.183552,175.612912 C109.299612,177.338186 112.600683,179.633856 116.086765,182.49992 C112.58346,209.24486 109.955982,224.674633 108.20433,228.789239 Z M102.621987,164.396166 L102.472956,164.200008 L99.2805486,170.724982 C100.459627,158.481451 101.620718,150.034604 102.761361,145.393095 L106.433167,139.356077 L106.297962,139.133265 L102.960541,144.620503 C103.059163,144.256775 103.157629,143.921617 103.25594,143.615036 L106.941324,132.122144 L106.770276,131.971339 L103.084891,143.464231 C101.519825,148.344899 99.9278373,160.307513 98.3026493,179.374149 L98.4944673,179.419102 C98.7373406,176.569723 98.9794836,173.879235 99.2208751,171.347711 L102.621987,164.396166 Z M87.6917875,158.075784 L82.5463718,147.559048 L82.3061691,147.875209 L87.7879671,159.079477 C88.1770341,163.159703 88.567312,167.496142 88.9587671,172.088676 L89.267933,172.016222 C86.6485091,141.285254 84.0825968,122.004313 81.560075,114.137815 L75.6200955,95.6139554 L75.3444052,95.8570172 L81.2843848,114.380877 C81.4428383,114.875015 81.6015435,115.415211 81.7604978,116.001455 L76.3813552,107.157309 L76.1634363,107.51643 L82.0815296,117.246694 C83.9199784,124.727712 85.7913875,138.342061 87.6917875,158.075784 Z" id="Combined-Shape" fill-opacity="0.47" fill="url(#linearGradient-1)" opacity="0.45776721" transform="translate(92.439461, 166.647887) rotate(-99.000000) translate(-92.439461, -166.647887) "></path>
<g id="Group-12" transform="translate(111.787255, 0.000000)">
<path d="M7.69665335,105.062982 C20.0112987,97.852777 31.8128339,94.2476747 43.1012588,94.2476747 C54.3896837,94.2476747 67.7305495,97.852777 83.1238562,105.062982 C75.9403131,123.603508 69.2698802,134.418815 63.1125575,137.508902 C53.8765735,142.144034 43.9700032,146.11022 27.7079521,135.963859 C16.8665846,129.199618 10.1961517,118.899325 7.69665335,105.062982 Z" id="Path-33" fill="url(#linearGradient-2)"></path>
<path d="M19.2104037,81.6111704 L28.8450791,70.3918959 L28.4229047,70.0753124 L19.3794467,80.6061329 C22.7195437,60.8459804 26.008687,47.2133974 29.239904,39.7223509 L39.6413974,29.9790637 L39.2583884,29.6194619 L29.8041377,38.4754528 C30.083512,37.8884232 30.3624484,37.347504 30.6409424,36.8527041 L41.0809065,18.3040348 L40.59636,18.0606475 L30.1563959,36.6093168 C25.7228728,44.486351 21.2130876,63.7931155 16.6092516,94.5652418 L17.1526341,94.637793 C17.840646,90.0391083 18.5265891,85.6968609 19.2104037,81.6111704 Z M11.0429481,98.3762648 C-1.03301231,86.6098073 -3.88110538,65.7442578 5.88190588,54.0499774 C14.1383268,44.1603133 21.2714395,25.8193703 27.8223466,13.138951 C28.6820535,11.4748389 29.3879705,19.332485 30.2288463,17.895246 C34.3454675,10.859047 38.394842,-2.50043682 42.2329449,0.407789073 C44.7292604,2.2993093 46.7462862,5.48060893 48.2840224,9.95168796 C48.7661065,11.3533821 45.8514665,16.7947559 46.2454681,19.1271275 C46.6268791,21.384966 50.3197014,20.5045368 50.6185695,23.6345218 C51.0143629,27.7795853 51.4451946,35.7179385 51.9110647,47.4495815 L42.1185028,62.147786 L52.4407244,49.8581558 C52.787896,51.7143254 52.5565508,54.1920228 51.7466888,57.2912481 C50.9368269,60.3904734 49.4882056,63.7655283 47.4008251,67.4164128 L36.4230745,84.0926608 L47.4774316,69.7178431 C45.152322,78.4387029 42.1045165,84.9329417 38.3340151,89.2005595 C34.5635137,93.4681773 21.42193,98.2939051 15.6009623,101.02243 L2.21797866,146.541183 L11.0429481,98.3762648 Z" id="Combined-Shape-Copy" fill="#3BC2CA" transform="translate(26.298490, 73.270591) scale(-1, 1) translate(-26.298490, -73.270591) "></path>
<path d="M53.4807776,93.8958355 L59.4584888,86.93498 L59.1965561,86.7385598 L53.5856582,93.2722728 C55.6579786,81.0123387 57.6986856,72.5541768 59.7034529,67.9064528 L66.1569265,61.8613547 L65.9192935,61.6382444 L60.0535245,67.1328308 C60.2268587,66.7686158 60.3999212,66.4330093 60.5727092,66.1260171 L67.0500516,54.6177322 L66.7494209,54.4667257 L60.2720786,65.9750105 C57.5213558,70.8622157 54.7233172,82.840851 51.866926,101.933024 L52.2040607,101.978037 C52.6309289,99.1248419 53.0565136,96.4307499 53.4807776,93.8958355 Z M48.4133841,104.297524 C40.9210088,96.9971759 39.1539459,84.0514124 45.2112814,76.7958455 C50.3338723,70.6599298 54.7595209,59.2805261 58.8239475,51.413122 C59.3573417,50.3806449 59.7953189,55.255821 60.3170295,54.3641044 C62.8711345,49.9985847 65.3835172,41.7098637 67.7648191,43.5142353 C69.3136261,44.6878048 70.565064,46.6616015 71.5191328,49.4356254 C71.8182357,50.3052886 70.0098846,53.6813194 70.2543378,55.1284096 C70.4909794,56.5292566 72.7821438,55.9830056 72.9675727,57.9249648 C73.2131376,60.4967164 73.4804417,65.4219662 73.7694848,72.7007142 L67.693815,81.8200274 L74.0981054,74.1950834 C74.3135036,75.3467201 74.1699684,76.8839757 73.6674999,78.8068505 C73.1650314,80.7297252 72.2662529,82.8237349 70.9711643,85.0888795 L64.1601592,95.4354445 L71.0186938,86.5167726 C69.5761093,91.9275186 67.6851373,95.9567861 65.3457779,98.604575 C63.0064185,101.252364 54.8528908,104.246425 51.2413458,105.939304 L42.9380446,134.180832 L48.4133841,104.297524 Z" id="Combined-Shape-Copy" fill="#6CD5DB"></path>
<path d="M10.7753147,114.161535 C21.0375192,110.155891 31.8128339,108.153069 43.1012588,108.153069 C54.3896837,108.153069 66.1912188,110.155891 78.5058642,114.161535 C74.4009824,128.365322 69.2698802,136.559781 63.1125575,138.744913 C53.8765735,142.022611 43.9700032,144.827268 27.7079521,137.652347 C16.8665846,132.869067 11.2223722,125.038796 10.7753147,114.161535 Z" id="Path-33" fill="url(#linearGradient-3)" opacity="0.650701993"></path>
<path d="M7.69665335,105.062982 C24.1161805,119.483391 40.5357077,123.603508 56.9552348,117.423332 C73.374762,111.243157 82.0976358,107.12304 83.1238562,105.062982 C76.9665335,131.843742 72.3485415,147.29418 69.2698802,151.414297 C64.6518882,157.594472 60.0338962,165.319692 41.5619281,162.229604 C23.0899601,159.139516 18.4756744,150.043904 15.3933067,143.689078 C13.3383949,139.452527 10.7728438,126.577162 7.69665335,105.062982 Z" id="Path-32" fill="url(#linearGradient-4)"></path>
</g>
<path d="M150.482843,103.915493 C151.756772,109.023474 152.393736,111.577465 152.393736,111.577465 C152.393736,111.577465 152.393736,113.492958 154.30463,113.492958 C155.578558,113.492958 156.215523,112.85446 156.215523,111.577465 L154.30463,102 L150.482843,103.915493 Z" id="Path-34" fill="#7CCBC7"></path>
<path d="M159.081863,106.645324 C159.081863,107.750162 159.081863,108.855 159.081863,109.959839 C159.081863,111.617096 161.523048,112.777818 161.523048,111.534875 C161.523048,110.706246 161.664766,108.964574 161.948203,106.309859 L159.081863,106.645324 Z" id="Path-35" fill="#8FD7D4" transform="translate(160.515033, 109.183099) rotate(11.000000) translate(-160.515033, -109.183099) "></path>
</g>
</g>
<g id="Group-40" transform="translate(202.000000, 0.000000)">
<g id="Group-39" transform="translate(0.000000, 65.000000)">
<rect id="Rectangle-6" stroke="#B4AAD7" stroke-width="12" fill="#EDE9F5" x="37.1969112" y="6" width="332.725869" height="186.496296" rx="7"></rect>
<rect id="Rectangle-7" fill="#EDE9F5" x="0" y="192.244444" width="404" height="9.37777778"></rect>
<path d="M166.903475,192.244444 L241.776062,192.244444 L241.776062,192.244444 C241.776062,195.697247 238.977012,198.496296 235.52421,198.496296 L173.155327,198.496296 C169.702524,198.496296 166.903475,195.697247 166.903475,192.244444 Z" id="Rectangle-7" fill="#FAF8FF"></path>
<path d="M0,201.622222 L404,201.622222 L404,201.622222 C404,206.801426 399.801426,211 394.622222,211 L9.37777778,211 C4.19857412,211 6.34269518e-16,206.801426 0,201.622222 Z" id="Rectangle-7" fill="#B4AAD7"></path>
</g>
<path d="M116,34 L297,34 C301.418278,34 305,37.581722 305,42 L305,245 L108,245 L108,42 C108,37.581722 111.581722,34 116,34 Z" id="Rectangle-8" fill="url(#linearGradient-5)"></path>
<rect id="Rectangle-8" fill="#FFFFFF" x="128" y="51" width="156" height="193"></rect>
<rect id="Rectangle-12-Copy" fill="#EDE9F5" opacity="0.678781703" x="173" y="101" width="100" height="16" rx="8"></rect>
<rect id="Rectangle-12-Copy" fill="#EDE9F5" opacity="0.678781703" x="209" y="120" width="64" height="16" rx="8"></rect>
<rect id="Rectangle-12-Copy-2" fill="#EDE9F5" opacity="0.678781703" x="209" y="201" width="64" height="16" rx="8"></rect>
<path d="M162,29.7837838 L251,29.7837838 L251,58 L162,58 L162,29.7837838 Z M206.5,39.1891892 C195.720758,39.1891892 186.982456,30.4163904 186.982456,19.5945946 C186.982456,8.77279882 195.720758,0 206.5,0 C217.279242,0 226.017544,8.77279882 226.017544,19.5945946 C226.017544,30.4163904 217.279242,39.1891892 206.5,39.1891892 Z M206.5,29.7837838 C212.105206,29.7837838 216.649123,25.2219284 216.649123,19.5945946 C216.649123,13.9672608 212.105206,9.40540541 206.5,9.40540541 C200.894794,9.40540541 196.350877,13.9672608 196.350877,19.5945946 C196.350877,25.2219284 200.894794,29.7837838 206.5,29.7837838 Z" id="Oval-6" fill="url(#linearGradient-6)" fill-rule="nonzero"></path>
<circle id="Oval-7" fill="#EDE9F5" cx="172" cy="108" r="32"></circle>
<circle id="Oval-7-Copy" fill="#EDE9F5" cx="172" cy="188" r="21"></circle>
<path d="M199.077113,76.4755965 C200.409209,74.7892907 202.850672,74.5064587 204.530272,75.8438737 C206.209871,77.1812887 206.491579,79.6324987 205.159482,81.3188045 L169.449231,126.524542 C167.845034,128.555301 164.750029,128.477178 163.2495,126.368051 L147.723304,104.544591 C146.477292,102.793209 146.881329,100.359309 148.625746,99.1083216 C150.370163,97.8573347 152.794385,98.2629848 154.040397,100.014367 L166.570233,117.626175 L199.077113,76.4755965 Z" id="Path-55" fill="#F94A8A" fill-rule="nonzero"></path>
<path d="M190.423854,166.974451 C191.304393,165.860852 192.918241,165.674077 194.028485,166.557275 C195.138729,167.440474 195.324942,169.059197 194.444403,170.172795 L170.839322,200.025641 C169.778921,201.366708 167.73307,201.315117 166.741195,199.922298 L156.478116,185.510579 C155.654481,184.354006 155.921556,182.746713 157.074646,181.92059 C158.227735,181.094466 159.830187,181.362348 160.653822,182.518921 L168.936256,194.149361 L190.423854,166.974451 Z" id="Path-55-Copy" fill="#B4AAD7" fill-rule="nonzero"></path>
<rect id="Rectangle-12" fill="#EDE9F5" x="203" y="182" width="72" height="16" rx="8"></rect>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 15 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 55 KiB

View File

@@ -36,7 +36,7 @@ const IndexPage = ({ ...props }) => (
<main>
<section className="container mx-auto max-w-lg text-center my-12 p-4">
<SectionIntro
intro="What We Offer"
intro="What We Do"
headline="Because great code makes our heart pound"
text="We have a deep passion for cutting edge technologies and incredible user experiences. Our experienced engineers deliver custom end-to-end software solutions daily and can even help you with initial analysis, architecture design, testing and deployments."
/>
@@ -114,12 +114,12 @@ const IndexPage = ({ ...props }) => (
/>
</section>
<section className="text-center p-8 relative bg-saburly-fadeout-up">
<section className="text-center p-8 relative bg-saburly-fadeout">
<SectionIntro
intro="Blog & Social Media"
headline="Occasionally we find the time to have fun and publish"
/>
<div className="container mx-auto p-4 w-full md:flex md:flex-wrap items-stretch w-full">
<div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">
{props.data.allWordpressPost.edges.map(({ node }) => (
<div key={node.id} className="md:w-1/2 p-2">
<Card

View File

@@ -7,8 +7,9 @@ import WorkStyle from '../components/WorkStyle'
import Technologies from '../components/Technologies'
import FullstackDev from '../images/fullstack-web-development.svg'
import WebdevServices from '../images/web-development-services.svg'
import WebdevServices from '../images/web-development-services-company.svg'
import UXdesign from '../images/ux-ui-design-services.svg'
import HowWeWork from '../images/how-we-work.svg'
const ServicesPage = () => (
<div>
@@ -24,33 +25,75 @@ const ServicesPage = () => (
image={WebdevServices}
imgClasses="-mb-16 md:-mt-6"
/>
<section className="relative">
<section className="py-16">
<div className="container mx-auto">
<SectionIntro
classes="text-center"
headline="Full-stack software development"
/>
<div className="flex">
<div className="lg:flex">
<SectionIntro
classes="max-w-lg"
headline="Design services"
text="At Saburly, we offer consistent quality that extends to every section of the application development. Our approach is simple: focus on how users might use the product
in the best way possible. The solutions are usually shaped
through iterative processes of research, prototyping and
testing. All devices and screen sizes are welcome
here."
>
<div className="my-4">
<h3 className="font-medium text-black">
Conceptualization & Branding
</h3>
<p className="font-light leading-normal text-black-light">
Before our designers work on visual details, we start off by
creating a clear understanding of the problem that you're trying
to solve with the project. After collecting and analyzing data,
we develop concept that becomes a guideline for the design.
</p>
</div>
<div className="my-4">
<h3 className="font-medium text-black">UX & UI Design</h3>
<p className="font-light leading-normal text-black-light">
We love to design pixel-perfect products that are easy to use
and delightful to interact with. From User-Flows, Lo-Fi & Hi-Fi
Wireframes and Prototypes to polished slick end-products, we
create digital experiences that stand out. This is done through
our human-centered UI/UI approach where the main goal is to
effectively communicate the functionality of your product to its
target audience.
</p>
</div>
</SectionIntro>
<img
src={UXdesign}
className="-mt-12"
alt="User Experience Design Agency"
/>
</div>
</div>
</section>
<section className="relative bg-saburly-lighter py-16">
<div className="container mx-auto">
<div className="lg:flex">
<img
src={FullstackDev}
className="w-full md:max-w-md mx-auto text-center content-center align-center p-8 -mb-16"
className="w-full md:max-w-md mx-auto text-center content-center align-center p-8"
alt="Fullstack Web Development Agency"
/>
<div>
<div className="border rounded p-4 my-4">
<h3 className="opacity-30">Web Development</h3>
<p className="font-light leading-normal opacity-70 mt-4">
<SectionIntro
headline="Full-stack software development"
text="From infrastructure to AI, we develop data-driven Full-Stack applications for both custom software and third party solutions."
/>
<div className="my-4">
<h3 className="font-medium text-black">Web development</h3>
<p className="font-light leading-normal text-black-light">
We offer full-cycle web development services for the connected
world. Our talented developers work with popular languages and
are up to speed with cutting edge trends. The solutions provided
are both for custom web development solutions and extensions for
third party solutions.
are up to speed with cutting edge trends.
</p>
</div>
<div className="border rounded p-4 my-4">
<h3 className="opacity-30">Mobile & Desktop applications</h3>
<p className="font-light leading-normal opacity-70 mt-4">
<div className="my-4">
<h3 className="font-medium text-black">Mobile & desktop apps</h3>
<p className="font-light leading-normal text-black-light">
Building competitive applications these days is challenging, but
we believe that we have what it takes for both native languages
and hybrid solutions. Native mobile solutions for iOS are built
@@ -59,24 +102,26 @@ const ServicesPage = () => (
Electron to build cross-platform apps.
</p>
</div>
<div className="border rounded p-4 my-4">
<h3 className="opacity-30">AI & Blockchain</h3>
<p className="font-light leading-normal opacity-70 mt-4">
Building competitive applications these days is challenging, but
we believe that we have what it takes for both native languages
and hybrid solutions. Native mobile solutions for iOS are built
with Swift & Objective-C and Android solutions are built with
Java & Kotlin. We love using technologies like React Native and
Electron to build cross-platform apps.
<div className="my-4">
<h3 className="font-medium text-black">DevOps</h3>
<p className="font-light leading-normal text-black-light">
Our DevOps team has experience working with the world leading
hosting providers such as AWS and Google Cloud Platform. We
offer setups and automation to support delivery across all our
applications. We use the most up-to-date tools to enable stable
and predictable processes of continuous delivery.
</p>
</div>
</div>
</div>
<div className="border rounded p-4 my-4">
<h3 className="opacity-30">Technologies</h3>
<p className="font-light leading-normal opacity-70 mt-4">
Keeping track of emerging technologies is important to us so that we
can deliver forward-thinking solutions, but we understand that
<div className="p-8 my-4 bg-white border-bottom-saburly">
<h3 className="font-medium text-black">Emerging Technologies</h3>
<p className="font-light text-black-light leading-normal">
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
@@ -87,33 +132,19 @@ const ServicesPage = () => (
</div>
</section>
<section className="bg-saburly-fadeout-up">
<div className="container mx-auto">
<div className="md:flex">
<SectionIntro
classes="max-w-lg"
headline="UX & UI Design"
text="At Saburly, we offer consistent quality that extends to every section of the application development. All devices and screen sizes are welcome
here."
>
<p className="font-light leading-normal opacity-70 mt-4">
Our approach is simple: focus on how users might use the product
in the best way possible.. The solutions are usually shaped
through iterative processes of research, prototyping and testing.
</p>
</SectionIntro>
<img src={UXdesign} alt="User Experience Design Agency" />
</div>
</div>
</section>
<div className="bg-saburly-fadeout-up p-4">
<section className="container mx-auto mt-8 max-w-lg text-center">
<div className="py-16 bg-saburly-fadeout">
<div className="container mx-auto lg:flex">
<SectionIntro
headline="How We Work"
text="We are helping everything from Fortune 500 companies to startups and tailor our processes based on your scale and needs. We collaborate closely with our clients at each step of the development process and make sure that the solutions deliver great value and meets your specific business requirements"
headline="Flexible Workflow"
text="We are helping everything from Fortune 500 companies to startups
and tailor our processes based on your scale and needs. We
collaborate closely with our clients at each step of the
development process and make sure that the solutions deliver great
value and meets your specific business requirements"
classes="container mx-auto"
/>
</section>
<img src={HowWeWork} className="lg:-mt-12" alt="DevOps Agency" />
</div>
<WorkStyle />
</div>
</div>

View File

@@ -7,12 +7,16 @@
);
}
.bg-saburly-lighter {
background: rgba(132, 72, 247, 0.04);
}
.bg-saburly-light {
background: linear-gradient(
90deg,
rgba(255, 255, 255, 1) 1%,
rgba(243, 246, 248, 0.7) 49%,
rgba(241, 245, 248, 1) 100%
rgba(255, 255, 255, 1) 0%,
rgba(245, 247, 250, 0.7) 49%,
rgba(245, 247, 250, 1) 100%
);
}
@@ -21,7 +25,8 @@
background: linear-gradient(
180deg,
rgba(255, 255, 255, 1) 0%,
rgba(241, 245, 248, 0.7) 100%
rgba(245, 247, 250, 0.7) 49%,
rgba(245, 247, 250, 1) 100%
);
}
@@ -29,7 +34,8 @@
background: rgb(255, 255, 255);
background: linear-gradient(
180deg,
rgba(241, 245, 248, 0.7) 0%,
rgba(242, 242, 242, 1) 0%,
rgba(242, 242, 242, 0.5) 49%,
rgba(255, 255, 255, 1) 100%
);
}
@@ -76,3 +82,7 @@
.client-logo {
max-height: 3rem;
}
.border-bottom-saburly {
border-bottom: 2px solid #e3e3e3;
}

View File

@@ -659,7 +659,11 @@ table {
}
.bg-black {
background-color: #212121;
background-color: #111;
}
.bg-black-light {
background-color: #333;
}
.bg-grey-darkest {
@@ -951,7 +955,11 @@ table {
}
.group:hover .group-hover\:bg-black {
background-color: #212121;
background-color: #111;
}
.group:hover .group-hover\:bg-black-light {
background-color: #333;
}
.group:hover .group-hover\:bg-grey-darkest {
@@ -1243,7 +1251,11 @@ table {
}
.hover\:bg-black:hover {
background-color: #212121;
background-color: #111;
}
.hover\:bg-black-light:hover {
background-color: #333;
}
.hover\:bg-grey-darkest:hover {
@@ -1607,7 +1619,11 @@ table {
}
.border-black {
border-color: #212121;
border-color: #111;
}
.border-black-light {
border-color: #333;
}
.border-grey-darkest {
@@ -1899,7 +1915,11 @@ table {
}
.hover\:border-black:hover {
border-color: #212121;
border-color: #111;
}
.hover\:border-black-light:hover {
border-color: #333;
}
.hover\:border-grey-darkest:hover {
@@ -4483,7 +4503,11 @@ table {
}
.text-black {
color: #212121;
color: #111;
}
.text-black-light {
color: #333;
}
.text-grey-darkest {
@@ -4775,7 +4799,11 @@ table {
}
.group:hover .group-hover\:text-black {
color: #212121;
color: #111;
}
.group:hover .group-hover\:text-black-light {
color: #333;
}
.group:hover .group-hover\:text-grey-darkest {
@@ -5067,7 +5095,11 @@ table {
}
.hover\:text-black:hover {
color: #212121;
color: #111;
}
.hover\:text-black-light:hover {
color: #333;
}
.hover\:text-grey-darkest:hover {
@@ -5735,7 +5767,11 @@ table {
}
.sm\:bg-black {
background-color: #212121;
background-color: #111;
}
.sm\:bg-black-light {
background-color: #333;
}
.sm\:bg-grey-darkest {
@@ -6027,7 +6063,11 @@ table {
}
.group:hover .sm\:group-hover\:bg-black {
background-color: #212121;
background-color: #111;
}
.group:hover .sm\:group-hover\:bg-black-light {
background-color: #333;
}
.group:hover .sm\:group-hover\:bg-grey-darkest {
@@ -6319,7 +6359,11 @@ table {
}
.sm\:hover\:bg-black:hover {
background-color: #212121;
background-color: #111;
}
.sm\:hover\:bg-black-light:hover {
background-color: #333;
}
.sm\:hover\:bg-grey-darkest:hover {
@@ -6675,7 +6719,11 @@ table {
}
.sm\:border-black {
border-color: #212121;
border-color: #111;
}
.sm\:border-black-light {
border-color: #333;
}
.sm\:border-grey-darkest {
@@ -6967,7 +7015,11 @@ table {
}
.sm\:hover\:border-black:hover {
border-color: #212121;
border-color: #111;
}
.sm\:hover\:border-black-light:hover {
border-color: #333;
}
.sm\:hover\:border-grey-darkest:hover {
@@ -9535,7 +9587,11 @@ table {
}
.sm\:text-black {
color: #212121;
color: #111;
}
.sm\:text-black-light {
color: #333;
}
.sm\:text-grey-darkest {
@@ -9827,7 +9883,11 @@ table {
}
.group:hover .sm\:group-hover\:text-black {
color: #212121;
color: #111;
}
.group:hover .sm\:group-hover\:text-black-light {
color: #333;
}
.group:hover .sm\:group-hover\:text-grey-darkest {
@@ -10119,7 +10179,11 @@ table {
}
.sm\:hover\:text-black:hover {
color: #212121;
color: #111;
}
.sm\:hover\:text-black-light:hover {
color: #333;
}
.sm\:hover\:text-grey-darkest:hover {
@@ -10788,7 +10852,11 @@ table {
}
.md\:bg-black {
background-color: #212121;
background-color: #111;
}
.md\:bg-black-light {
background-color: #333;
}
.md\:bg-grey-darkest {
@@ -11080,7 +11148,11 @@ table {
}
.group:hover .md\:group-hover\:bg-black {
background-color: #212121;
background-color: #111;
}
.group:hover .md\:group-hover\:bg-black-light {
background-color: #333;
}
.group:hover .md\:group-hover\:bg-grey-darkest {
@@ -11372,7 +11444,11 @@ table {
}
.md\:hover\:bg-black:hover {
background-color: #212121;
background-color: #111;
}
.md\:hover\:bg-black-light:hover {
background-color: #333;
}
.md\:hover\:bg-grey-darkest:hover {
@@ -11728,7 +11804,11 @@ table {
}
.md\:border-black {
border-color: #212121;
border-color: #111;
}
.md\:border-black-light {
border-color: #333;
}
.md\:border-grey-darkest {
@@ -12020,7 +12100,11 @@ table {
}
.md\:hover\:border-black:hover {
border-color: #212121;
border-color: #111;
}
.md\:hover\:border-black-light:hover {
border-color: #333;
}
.md\:hover\:border-grey-darkest:hover {
@@ -14588,7 +14672,11 @@ table {
}
.md\:text-black {
color: #212121;
color: #111;
}
.md\:text-black-light {
color: #333;
}
.md\:text-grey-darkest {
@@ -14880,7 +14968,11 @@ table {
}
.group:hover .md\:group-hover\:text-black {
color: #212121;
color: #111;
}
.group:hover .md\:group-hover\:text-black-light {
color: #333;
}
.group:hover .md\:group-hover\:text-grey-darkest {
@@ -15172,7 +15264,11 @@ table {
}
.md\:hover\:text-black:hover {
color: #212121;
color: #111;
}
.md\:hover\:text-black-light:hover {
color: #333;
}
.md\:hover\:text-grey-darkest:hover {
@@ -15841,7 +15937,11 @@ table {
}
.lg\:bg-black {
background-color: #212121;
background-color: #111;
}
.lg\:bg-black-light {
background-color: #333;
}
.lg\:bg-grey-darkest {
@@ -16133,7 +16233,11 @@ table {
}
.group:hover .lg\:group-hover\:bg-black {
background-color: #212121;
background-color: #111;
}
.group:hover .lg\:group-hover\:bg-black-light {
background-color: #333;
}
.group:hover .lg\:group-hover\:bg-grey-darkest {
@@ -16425,7 +16529,11 @@ table {
}
.lg\:hover\:bg-black:hover {
background-color: #212121;
background-color: #111;
}
.lg\:hover\:bg-black-light:hover {
background-color: #333;
}
.lg\:hover\:bg-grey-darkest:hover {
@@ -16781,7 +16889,11 @@ table {
}
.lg\:border-black {
border-color: #212121;
border-color: #111;
}
.lg\:border-black-light {
border-color: #333;
}
.lg\:border-grey-darkest {
@@ -17073,7 +17185,11 @@ table {
}
.lg\:hover\:border-black:hover {
border-color: #212121;
border-color: #111;
}
.lg\:hover\:border-black-light:hover {
border-color: #333;
}
.lg\:hover\:border-grey-darkest:hover {
@@ -19641,7 +19757,11 @@ table {
}
.lg\:text-black {
color: #212121;
color: #111;
}
.lg\:text-black-light {
color: #333;
}
.lg\:text-grey-darkest {
@@ -19933,7 +20053,11 @@ table {
}
.group:hover .lg\:group-hover\:text-black {
color: #212121;
color: #111;
}
.group:hover .lg\:group-hover\:text-black-light {
color: #333;
}
.group:hover .lg\:group-hover\:text-grey-darkest {
@@ -20225,7 +20349,11 @@ table {
}
.lg\:hover\:text-black:hover {
color: #212121;
color: #111;
}
.lg\:hover\:text-black-light:hover {
color: #333;
}
.lg\:hover\:text-grey-darkest:hover {
@@ -20894,7 +21022,11 @@ table {
}
.xl\:bg-black {
background-color: #212121;
background-color: #111;
}
.xl\:bg-black-light {
background-color: #333;
}
.xl\:bg-grey-darkest {
@@ -21186,7 +21318,11 @@ table {
}
.group:hover .xl\:group-hover\:bg-black {
background-color: #212121;
background-color: #111;
}
.group:hover .xl\:group-hover\:bg-black-light {
background-color: #333;
}
.group:hover .xl\:group-hover\:bg-grey-darkest {
@@ -21478,7 +21614,11 @@ table {
}
.xl\:hover\:bg-black:hover {
background-color: #212121;
background-color: #111;
}
.xl\:hover\:bg-black-light:hover {
background-color: #333;
}
.xl\:hover\:bg-grey-darkest:hover {
@@ -21834,7 +21974,11 @@ table {
}
.xl\:border-black {
border-color: #212121;
border-color: #111;
}
.xl\:border-black-light {
border-color: #333;
}
.xl\:border-grey-darkest {
@@ -22126,7 +22270,11 @@ table {
}
.xl\:hover\:border-black:hover {
border-color: #212121;
border-color: #111;
}
.xl\:hover\:border-black-light:hover {
border-color: #333;
}
.xl\:hover\:border-grey-darkest:hover {
@@ -24694,7 +24842,11 @@ table {
}
.xl\:text-black {
color: #212121;
color: #111;
}
.xl\:text-black-light {
color: #333;
}
.xl\:text-grey-darkest {
@@ -24986,7 +25138,11 @@ table {
}
.group:hover .xl\:group-hover\:text-black {
color: #212121;
color: #111;
}
.group:hover .xl\:group-hover\:text-black-light {
color: #333;
}
.group:hover .xl\:group-hover\:text-grey-darkest {
@@ -25278,7 +25434,11 @@ table {
}
.xl\:hover\:text-black:hover {
color: #212121;
color: #111;
}
.xl\:hover\:text-black-light:hover {
color: #333;
}
.xl\:hover\:text-grey-darkest:hover {

View File

@@ -45,7 +45,8 @@ View the full documentation at https://tailwindcss.com.
let colors = {
transparent: 'transparent',
black: '#212121',
black: '#111111',
'black-light': '#333333',
'grey-darkest': '#3d4852',
'grey-darker': '#606f7b',
'grey-dark': '#8795a1',