Files
old-v2-frontend/src/pages/index.js

170 lines
6.3 KiB
JavaScript
Raw Normal View History

import React from 'react'
import SectionIntro from '../components/SectionIntro'
import Button from '../components/Button'
2018-07-01 11:56:57 +02:00
import Card from '../components/Card'
import Service from '../components/Service'
2018-07-06 17:33:36 +02:00
import PageIntro from '../components/PageIntro'
2018-07-03 10:52:51 +02:00
import ImgIntro from '../images/software-consulting.svg'
import ImgDesign from '../images/ux-ui-design-agency.svg'
import ImgFullstack from '../images/fullstack-web-development-agency.svg'
import ImgMobile from '../images/mobile-development-agency.svg'
import LogoIBM from '../images/logo-ibm-color.svg'
import LogoRicoh from '../images/logo-ricoh-color.svg'
import LogoKinnarps from '../images/logo-kinnarps-color.svg'
import LogoCoor from '../images/logo-coor-color.svg'
const IndexPage = ({ ...props }) => (
2018-07-07 00:07:28 +02:00
<div>
<PageIntro button buttonText="Let's Build Together" url="/proposal" buttonClasses="text-white shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green mb-20" intro="Welcome To Saburly" headline="We build the right software for your needs" text="We are a team of creative, open minded, skilled and passionate engineers that ship success daily" image={ImgIntro} />
2018-07-07 00:07:28 +02:00
<main>
<section className="container mx-auto text-center my-12 p-4">
<SectionIntro
intro="Services"
headline="Because beautiful code makes our heart pound"
text="We have a passion for great software and design with the help of modern technologies. Our speciality is custom end-to-end solutions and our skilled team can even help you with initial analysis, architecture design, testing and deployments"
/>
</section>
<section className="bg-saburly-indigolight 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>
2018-07-07 00:07:28 +02:00
<Service
img={ImgDesign}
title="UX & UI Design"
text="Our approach is simple: focus on how people will actually use the products. We offer prototyping, UI and UX design for web and mobile products. We shape UX through research, data & content analysis"
/>
2018-07-01 12:07:06 +02:00
2018-07-07 00:07:28 +02:00
<Service
reversed
img={ImgFullstack}
title="Fullstack Web Development"
text="We build web applications using the technologies such as JavaScript, React, Ruby on Rails, Python, Node.js, and Elixir. We write high-quality code that is maintainable and will stand the test of time"
/>
2018-07-01 12:07:06 +02:00
2018-07-07 00:07:28 +02:00
<Service
img={ImgMobile}
imgClasses="max-h-sm"
title="Mobile Development"
text="We develop for both iOS and Android. For iOS we use Swift and Objective-C. Android applications are built in Java and Kotlin. We also enjoy working with React Native technology because it allows writing native apps for both platform at once"
/>
2018-07-07 00:07:28 +02:00
<div className="py-8 text-center lg:flex justify-center">
<Button
standard
2018-07-07 01:15:48 +02:00
text="More About Our Work"
2018-07-07 00:07:28 +02:00
url="/services"
classes="m-1 rounded-full hover:shadow-md text-grey-darker hover:shadow"
/>
</div>
</section>
2018-07-01 12:07:06 +02:00
2018-07-07 00:07:28 +02:00
<section className="container mx-auto text-center p-4 my-12">
<SectionIntro
intro="Clients"
headline="With ambitious projects comes great responsibility"
text="We think big, design smart and develop fast for all projects and teams. Currently were serving everything from global leaders to startups and we tailor our processes based on your scale and needs. We have helped some of the worlds leading enterprises and businesses bring ideas to life and were really interested in hearing what we can help you with"
/>
2018-07-07 00:07:28 +02:00
<div className="p-4 md:flex items-center max-w-full justify-center">
<img
src={LogoIBM}
className="opacity-50 hover:opacity-100 client-logo p-1"
alt="IBM Logo"
/>
<img
src={LogoRicoh}
className="opacity-50 hover:opacity-100 client-logo p-1"
alt="Ricoh Logo"
/>
<img
src={LogoCoor}
className="opacity-50 hover:opacity-100 client-logo p-1"
alt="Coor Logo"
/>
<img
src={LogoKinnarps}
className="opacity-50 hover:opacity-100 client-logo p-1"
alt="Kinnarps Logo"
/>
</div>
<Button
2018-07-07 00:07:28 +02:00
filled
text="Get a free proposal"
url="/proposal"
classes="text-white shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green"
/>
2018-07-07 00:07:28 +02:00
</section>
2018-07-07 00:07:28 +02:00
<section className="container mx-auto text-center p-4">
<SectionIntro
intro="Blog & Social Media"
headline="But occasionally we find the time to have fun and publish stuff"
/>
2018-07-07 00:07:28 +02:00
<div className="container mx-auto p-4 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
url={`blog/${node.slug}`}
title={node.title}
date={node.date}
excerpt={node.excerpt}
image={
node.featured_media
? node.featured_media.localFile.childImageSharp.resolutions
: undefined
}
/>
</div>
))}
</div>
<Button
standard
text="More Posts"
url="/blog"
classes="mt-2 mb-8 hover:shadow-md rounded-full text-grey-darker"
2018-07-04 20:49:13 +02:00
/>
2018-07-07 00:07:28 +02:00
</section>
</main>
</div>
)
export const query = graphql`
query indexPostsQuery {
allWordpressPost(limit: 2) {
edges {
node {
id
title
excerpt
status
slug
date(formatString: "MMMM DD, YYYY")
featured_media {
localFile {
childImageSharp {
resolutions(width: 600, height: 300) {
src
width
height
}
}
}
}
}
}
}
}
`
export default IndexPage