hero.tsx

import { Columns, Column } from '@/components/columns'
import { Image } from '@/components/image'
import { Accent } from '@/components/accent'
import { Heading } from '@/components/heading'
import { Paragraph } from '@/components/paragraph'

export default function Hero() {
  return (
    <>
      <div className="relative">
        <div className="absolute inset-y-0 left-0 w-full xl:w-2/3 bg-body2 z-0"></div>
        <div className="px-6 mx-auto max-w-[1600px] relative">
          <Columns
            reverseColumns={false}
            className="bg-body2"
            cols="grid-cols-1 xl:grid-cols-2"
            gap="gap-0 xl:gap-20"
          >
            <Column className="mx-auto max-w-2xl lg:max-w-7xl py-24 max-xl:order-2">
              <Heading