import React from 'react';

import part1banner from '../assets/images/part-1-banner.png';

export default function PartOne() {
  return (
    <div
      className="w-full h-screen flex flex-col items-center sm:justify-start justify-center sm:py-12 sm:px-20 p-4"
      id="part-one"
    >
      <div className="text-red-600 uppercase text-sm font-bold font-avenirblack tracking-wide">
        How we do it
      </div>

      <div className="text-gray-900 sm:text-2xl text-xl font-avenirbook text-center mb-4">
        We use data-driven creativity
        <br />
        to solve business problems
      </div>

      <img
        src={part1banner}
        alt="part-1-banner"
        className="w-full object-cover sm:h-5/6"
      />

      <div className="bg-white sm:-mt-48 sm:w-4/5 w-full sm:pt-12 sm:px-36 sm:text-2xl text-base font-avenirbook text-center mt-4">
        By harnessing powerful insights and smart targeting, we’re able to
        create behavior-changing ideas and experiences that deliver value to
        brands. Supported by our proprietary{' '}
        <u>Creative Intelligence process</u>, <u>unique tools</u> and{' '}
        <u>global partners</u>, we are able to put data at the heart of
        everything we do to orchestrate experiences that deliver creativity with
        precision and purpose.
      </div>
    </div>
  );
}
