Dalto Hero Component

Hero.jsx

import { LightningBoltIcon, ScaleIcon } from '@heroicons/react/outline'

const Hero = () => {
  const features = [
    {
      name: 'No hidden fees',
      description:
        'Sending money is free of charge, you have no need for a middle man or annoying taxes.',
      icon: ScaleIcon,
    },
    {
      name: 'Transfers are instant',
      description:
        'You do not have to wait for days anymore, you can get you money in seconds within any country in the world',
      icon: LightningBoltIcon,
    },
  ]

  return (
    <div className="py-12 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="lg:text-center">
          <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
            A better way to send money
          </p>
          <p className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
            Explore the crypto world. Buy and sell cryptocurrencies easily on
            Dalto.
          </p>
        </div>

        <div className="mt-10">
          <dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
            {features.map((feature) => (
              <div key={feature.name} className="relative">
                <dt>
                  <div className="drop-shadow-xl absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
                    <feature.icon className="h-6 w-6" aria-hidden="true" />
                  </div>
                  <p className="ml-16 text-lg leading-6 font-medium text-gray-900">
                    {feature.name}
                  </p>
                </dt>
                <dd className="mt-2 ml-16 text-base text-gray-500">
                  {feature.description}
                </dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </div>
  )
}

export default Hero