import React from 'react'

import SectionIntro from '../components/SectionIntro'
import InfoBox from '../components/InfoBox'
import Button from '../components/Button'

import ImgIntro from '../images/programming-company.svg'
import ImgDesign from '../images/ux-ui-design.svg'
import ImgFullstack from '../images/fullstack-web-development.svg'
import ImgMobile from '../images/mobile-development.svg'

const IndexPage = () => (
  <div>
    <section className="lg:flex items-center p-3">
      <div>
        <SectionIntro intro="Welcome To Saburly" classes="lg:max-w-xs" 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 every day." />
        <Button filled text="Let's Get In Touch" url="/proposal" classes="rounded-full" />
      </div>
      <img src={ImgIntro} className="overflow-hidden" alt="Software Development Agency" />
    </section>

    <section className="text-center p-3">
      <SectionIntro intro="Solutions" headline="Because beautiful code makes our heart pound" text="We have a passion for great software and design with the help of modern technologies. Custom end-to-end solutions is our speciality and our skilled team can even help you with initial analysis, architecture design, testing and deployments" />
    </section>

    <img src={ImgDesign} className="overflow-hidden" alt="UX & UI Design Agency" />
    <InfoBox headline="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." />

    <InfoBox headline="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." />
    <img src={ImgFullstack} className="overflow-hidden" alt="Fullstack Web Development Agency" />

    <img src={ImgMobile} className="overflow-hidden" alt="Mobile App Development Agency" />
    <InfoBox headline="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." />

    <Button standard text="More ABout What We Do" url="/services" classes="rounded-full" />
    <Button standard text="How We Work" url="/work" classes="rounded-full" />

    <section className="text-center p-3">
      <SectionIntro intro="Showcase" headline="We don’t descriminate, all screens & devices are welcome" />
    </section>

    <section className="text-center p-3">
      <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 we’re 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 we’re really interested in hearing what we can help you with" />
    </section>

    <section className="text-center p-3">
      <SectionIntro intro="Blog & Social Media" headline="But occasionally we find the time to have fun and publish stuff" />
    </section>
  </div>
)

export default IndexPage