import React from 'react'

import SectionIntro from './SectionIntro'
import Button from './Button'

const PageIntro = ({ ...props }) => (
  <section className="bg-saburly-indigo relative">
    <div className="container mx-auto flex lg:flex-row flex-col flex-col-reverse p-4">
      <div className="text-center lg:text-left lg:mt-4">
        <SectionIntro
          light
          intro="Welcome To Saburly"
          classes="lg:text-left lg:max-w-xs content-center"
          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 Build Together"
          url="/proposal"
          classes="shadow-md hover:shadow-lg rounded-full mt-4 font-light btn-saburly-green mb-20"
        />
      </div>
      <img
        src={props.image}
        className="lg:-mt-4 md:max-w-md xl:max-w-full z-10"
        alt="Software Development Agency"
      />
    </div>
    <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>
  </section>
)

export default PageIntro