hero.tsx

import { Section } from '@/components/section'
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 BackgroundConfetti from '@/components/background-confetti'
import heartIcon from '@iconify/icons-heroicons/heart'
import sparklesIcon from '@iconify/icons-heroicons/sparkles'

export default function Hero() {
  return (
    <Section className="relative pt-navbar pt-10 pb-24 lg:py-32 bg-gradient-to-br from-body via-accent2/5 to-body overflow-hidden">
      {/* Falling confetti - covers entire hero */}
      <BackgroundConfetti />
      <Columns
        cols="grid-cols-1 lg:grid-cols-2"
        gap="gap-20 lg:gap-16"
        reverseColumns={false}