hero.tsx

import { Image } from '@/components/image'
import { Heading } from '@/components/heading'
import { Paragraph } from '@/components/paragraph'
import { Span } from '@/components/span'
import { Button } from '@/components/button'
import { Buttons } from '@/components/buttons'

export default function Hero() {
  return (
    <div className="relative h-screen max-h-[1200px] min-h-[900px] overflow-hidden">
      {/* Background gradient overlay */}
      <div className="absolute inset-0 bg-gradient-to-b from-overlay/50 via-overlay/60 to-overlay/70 z-10"></div>

      {/* Background image */}
      <Image
        src="/images/layout-6/pexels-roman-odintsov-5837002.jpg"
        alt="Premium botanical beverage"
        className="absolute inset-0 w-full h-full object-cover"
        size="full"
        rounded="rounded-none"