Add carousel, service info and style changes
This commit is contained in:
Moris Zen
@@ -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
160
src/components/Technologies.js
Normal 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
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user