From 955b05667ea9b30f38068ee4ad14cdb78fa6d08d Mon Sep 17 00:00:00 2001 From: Moris Zen Date: Wed, 8 Aug 2018 18:10:40 +0200 Subject: [PATCH] Restructuring and styling services and index pages --- src/components/Card.js | 2 +- src/components/InfoBox.js | 4 +- src/components/SectionIntro.js | 6 +- src/components/Service.js | 2 +- src/components/WorkStyle.js | 3 +- src/images/how-we-work.svg | 72 ++++++ ...g => web-development-services-company.svg} | 61 +++-- src/pages/index.js | 6 +- src/pages/services.js | 145 ++++++----- src/styles/general.css | 20 +- src/styles/index.css | 240 +++++++++++++++--- tailwind.config.js | 3 +- 12 files changed, 419 insertions(+), 145 deletions(-) create mode 100644 src/images/how-we-work.svg rename src/images/{web-development-services.svg => web-development-services-company.svg} (62%) diff --git a/src/components/Card.js b/src/components/Card.js index ff0fd6e..7275fe2 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -4,7 +4,7 @@ import Link from 'gatsby-link' import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png' const Card = ({ ...props }) => ( -
+
{props.image ? ( diff --git a/src/components/InfoBox.js b/src/components/InfoBox.js index 4d42dc6..3b78707 100644 --- a/src/components/InfoBox.js +++ b/src/components/InfoBox.js @@ -3,8 +3,8 @@ import Link from 'gatsby-link' const InfoBox = ({ ...props }) => (
-

{props.headline}

-

{props.text}

+

{props.headline}

+

{props.text}

) diff --git a/src/components/SectionIntro.js b/src/components/SectionIntro.js index db26fb1..8554095 100644 --- a/src/components/SectionIntro.js +++ b/src/components/SectionIntro.js @@ -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} @@ -19,7 +19,7 @@ const IntroDefault = ({ ...props }) => ( {props.headline && (

{props.headline}

@@ -27,7 +27,7 @@ const IntroDefault = ({ ...props }) => ( {props.text && (

{props.text}

diff --git a/src/components/Service.js b/src/components/Service.js index 74d9b76..5ffeda1 100644 --- a/src/components/Service.js +++ b/src/components/Service.js @@ -13,7 +13,7 @@ const Service = ({ ...props }) => ( alt={`${props.title} agency`} /> diff --git a/src/components/WorkStyle.js b/src/components/WorkStyle.js index 9d97db6..ef58525 100644 --- a/src/components/WorkStyle.js +++ b/src/components/WorkStyle.js @@ -10,7 +10,8 @@ import UXResearch from '../images/ux-research.svg' import UnitIntegration from '../images/unit-and-integration-testing.svg' const WorkStyle = ({ ...props }) => ( -
+
+ {props.children}
diff --git a/src/images/how-we-work.svg b/src/images/how-we-work.svg new file mode 100644 index 0000000..a78e642 --- /dev/null +++ b/src/images/how-we-work.svg @@ -0,0 +1,72 @@ + + + + Group 21 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/images/web-development-services.svg b/src/images/web-development-services-company.svg similarity index 62% rename from src/images/web-development-services.svg rename to src/images/web-development-services-company.svg index f6da1b8..bebb833 100644 --- a/src/images/web-development-services.svg +++ b/src/images/web-development-services-company.svg @@ -1,5 +1,5 @@ - + Group 23 Created with Sketch. @@ -133,18 +133,17 @@ - + - - + + - - + - + @@ -161,29 +160,29 @@ - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + @@ -195,7 +194,7 @@ - + diff --git a/src/pages/index.js b/src/pages/index.js index a43848f..86117d5 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -36,7 +36,7 @@ const IndexPage = ({ ...props }) => (
@@ -114,12 +114,12 @@ const IndexPage = ({ ...props }) => ( />
-
+
-
+
{props.data.allWordpressPost.edges.map(({ node }) => (
(
@@ -24,33 +25,75 @@ const ServicesPage = () => ( image={WebdevServices} imgClasses="-mb-16 md:-mt-6" /> - -
+
- -
+
+ +
+

+ Conceptualization & Branding +

+

+ 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. +

+
+
+

UX & UI Design

+

+ 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. +

+
+ + User Experience Design Agency +
+
+
+ +
+
+
Fullstack Web Development Agency
-
-

Web Development

-

+ +

+

Web development

+

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.

-
-

Mobile & Desktop applications

-

+

+

Mobile & desktop apps

+

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.

-
-

AI & Blockchain

-

- 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. +

+

DevOps

+

+ 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.

-
-

Technologies

-

- Keeping track of emerging technologies is important to us so that we - can deliver forward-thinking solutions, but we understand that +

+

Emerging Technologies

+

+ 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 = () => (

-
-
-
- -

- 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. -

- - User Experience Design Agency -
-
-
- -
-
+
+
-
+ DevOps Agency +
diff --git a/src/styles/general.css b/src/styles/general.css index 537a553..493dc25 100644 --- a/src/styles/general.css +++ b/src/styles/general.css @@ -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; +} diff --git a/src/styles/index.css b/src/styles/index.css index cfc981a..ec09fd7 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -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 { diff --git a/tailwind.config.js b/tailwind.config.js index edbdffe..5dc0ce8 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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',