hero.tsx

import { Columns, Column } from '@/components/columns'
import { Image } from '@/components/image'
import { Heading } from '@/components/heading'
import { Paragraph } from '@/components/paragraph'
import { Buttons } from '@/components/buttons'
import { Button } from '@/components/button'
import { Accent } from '@/components/accent'
import arrowDownIcon from '@iconify/icons-heroicons/arrow-down-20-solid'

export default function Hero() {
  return (
    <div className="bg-accent3 pt-navbar overflow-hidden">
      <div className="mx-auto max-w-[1600px] relative">
        <div
          className="absolute top-0 left-0 w-[70%] lg:w-[40%] h-[524px] lg:h-full z-0 opacity-30 bg-cover bg-no-repeat bg-top-left bg-[url('https://speedwell-cdn.gallop.software/images/leaf1.jpg')]"
          aria-hidden="true"
        />
        <div
          className="absolute -bottom-10 -right-10 w-[500px] h-[500px] pointer-events-none select-none bg-contain bg-no-repeat bg-bottom-right rotate-10 opacity-40 bg-[url('https://speedwell-cdn.gallop.software/images/flowers.png')]"
          aria-hidden="true"