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

Add carousel, service info and style changes

Browse Source
This commit is contained in:
Moris Zen
2018-07-09 19:30:46 +02:00
parent 83968b1639
commit 04287d5615
5 changed files with 229 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -13,6 +13,7 @@
"gatsby-source-wordpress": "^2.0.93",
"gatsby-transformer-sharp": "^1.6.27",
"react-helmet": "^5.2.0",
"react-leaf-carousel": "^1.1.1",
"slideout": "^1.0.1"
},
"keywords": [

2
src/components/SectionIntro.js
View File

@@ -19,7 +19,7 @@ const IntroDefault = ({ ...props }) => (
{props.headline && (
<h1
className={`${props.light ? headlineDark : ''}
font-light pt-1 pb-2`}
font-normal pt-1 pb-2`}
>
{props.headline}
</h1>

160
src/components/Technologies.js Normal file
View File

@@ -0,0 +1,160 @@
import React from 'react'
import Link from 'gatsby-link'
import Carousel from 'react-leaf-carousel'
const Technologies = ({ ...props }) => (
<Carousel
breakpoints={[
{
breakpoint: 500,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
},
},
{
breakpoint: 768,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
},
},
]}
dots={false}
autoCycle={true}
arrows={false}
showSides={true}
pauseOnHover={false}
cycleInterval={2500}
showSides={false}
sidesOpacity={0.5}
sideSize={0.1}
slidesToScroll={4}
slidesToShow={4}
scrollOnDevice={true}
>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=55b64e&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=904098&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ef4d9c&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=00f3d1&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=00ffff&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ee1f34&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=91b4c0&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ff6347&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ebbfbf&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=def1f9&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=cdf2c6&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=9fa616&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=2c4caa&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=44e3e1&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ff6666&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=94e1e3&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=29083c&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ffff99&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=616161&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
<div>
<img
alt=""
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ed7ebe&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
/>
</div>
</Carousel>
)
export default Technologies

20
src/pages/services.js
View File

@@ -3,6 +3,7 @@ import React from 'react'
import PageIntro from '../components/PageIntro'
import SectionIntro from '../components/SectionIntro'
import WorkStyle from '../components/WorkStyle'
import Technologies from '../components/Technologies'
const ServicesPage = () => (
<div>
@@ -13,14 +14,16 @@ const ServicesPage = () => (
sectionClasses="mb-16 lg:mb-8"
/>
<section className="container max-w-lg mx-auto my-12 p-4">
<section className="container max-w-lg mx-auto mt-12 p-4">
<SectionIntro
classes="text-center mb-8"
classes="text-center"
headline="Software Development Services"
text="We have experiences with a wide variety of industries and are always keeping track of emerging technologies so that we can deliver forward-thinking solutions. Our developers are handpicked with care to ensure that we always deliver top-notch software quality. With our agile development process we can ensure high productivity and know how to balance between cost, time and quality."
/>
</section>
<div className="my-4 mx-auto border shadow-md p-6 rounded">
<div className="md:flex container mx-auto">
<div className="my-4 md:mx-2 border p-6 rounded">
<h3 className="text-l my-2">Modern Web Development</h3>
<p className="leading-normal">
We offer full-cycle web development services for the connected world.
@@ -31,7 +34,7 @@ const ServicesPage = () => (
</p>
</div>
<div className="my-4 mx-auto border shadow-md p-6 rounded">
<div className="my-4 md:mx-2 border p-6 rounded">
<h3 className="text-l my-2">Mobile App Development</h3>
<p className="leading-normal">
We have what it takes to develop competitive iOS and Android
@@ -42,7 +45,7 @@ const ServicesPage = () => (
</p>
</div>
<div className="my-4 mx-auto border shadow-md p-6 rounded">
<div className="my-4 md:mx-2 border p-6 rounded">
<h3 className="text-l my-2">UX & UI Design</h3>
<p className="leading-normal">
Our approach is simple: focus on how users might use the product in
@@ -51,13 +54,16 @@ const ServicesPage = () => (
iterative processes of research, prototyping and testing.
</p>
</div>
</div>
<div className="container mx-auto my-12">
<SectionIntro
classes="text-center my-12"
classes="text-center max-w-lg mx-auto"
headline="Technologies"
text="We understand that technologies are just tools and select the appropriate tool for your needs. These are the technologies that we're currently working with on a daily basis."
/>
</section>
<Technologies />
</div>
<div className="bg-grey-lighter p-10">
<section className="container mx-auto max-w-lg text-center">

55
yarn.lock
View File

@@ -1756,6 +1756,10 @@ camelcase@^4.0.0, camelcase@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
can-use-dom@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
caniuse-api@^1.5.2, caniuse-api@^1.5.3:
version "1.6.1"
resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
@@ -2963,6 +2967,10 @@ enhanced-resolve@~0.9.0:
memory-fs "^0.2.0"
tapable "^0.1.8"
enquire.js@^2.1.1:
version "2.1.6"
resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
entities@^1.1.1, entities@~1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
@@ -3385,7 +3393,7 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"
fbjs@^0.8.14, fbjs@^0.8.9:
fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.9:
version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
dependencies:
@@ -5209,6 +5217,12 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
json2mq@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
dependencies:
string-convert "^0.2.0"
json3@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
@@ -7598,6 +7612,15 @@ react-dom@^15.6.0:
object-assign "^4.1.0"
prop-types "^15.5.10"
react-dom@^16.1.0:
version "16.4.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.1.tgz#7f8b0223b3a5fbe205116c56deb85de32685dad6"
dependencies:
fbjs "^0.8.16"
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.0"
react-error-overlay@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655"
@@ -7621,12 +7644,29 @@ react-hot-loader@^3.0.0-beta.6:
redbox-react "^1.3.6"
source-map "^0.6.1"
react-leaf-carousel@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/react-leaf-carousel/-/react-leaf-carousel-1.1.1.tgz#38501a2239f2361514e16ce5bae12630863b1aec"
dependencies:
prop-types "^15.6.0"
react "^16.1.0"
react-dom "^16.1.0"
react-responsive-mixin "^0.4.0"
react-proxy@^3.0.0-alpha.0:
version "3.0.0-alpha.1"
resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz#4400426bcfa80caa6724c7755695315209fa4b07"
dependencies:
lodash "^4.6.1"
react-responsive-mixin@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/react-responsive-mixin/-/react-responsive-mixin-0.4.0.tgz#9504218a17d49346d9a09a1f5945f629afdb624b"
dependencies:
can-use-dom "^0.1.0"
enquire.js "^2.1.1"
json2mq "^0.2.0"
react-router-dom@^4.1.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
@@ -7667,6 +7707,15 @@ react@^15.6.0:
object-assign "^4.1.0"
prop-types "^15.5.10"
react@^16.1.0:
version "16.4.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32"
dependencies:
fbjs "^0.8.16"
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.0"
read-all-stream@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/read-all-stream/-/read-all-stream-3.1.0.tgz#35c3e177f2078ef789ee4bfafa4373074eaef4fa"
@@ -8820,6 +8869,10 @@ strict-uri-encode@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
string-convert@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
string-similarity@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/string-similarity/-/string-similarity-1.2.0.tgz#d75153cb383846318b7a39a8d9292bb4db4e9c30"