Function Section

web/src/components/ui/section.tsx:30–77

({
  children,
  className,
  containerClassName,
  background,
  contained = true,
  hero = false,
  fullViewport = false,
  animate = true,
  style: customStyle,
  ...props
}: SectionProps)

}

export function Section({
  children,
  className,
  containerClassName,
  background,
  contained = true,
  hero = false,
  fullViewport = false,
  animate = true,
  style: customStyle,
  ...props
}: SectionProps) {
  const style = {
    backgroundColor: background,
    ...customStyle,
  }
  const isMobile = useIsMobile()

  const content = contained ? (
    <div className={cn('codebuff-container relative z-10', containerClassName)}>
      {children}
    </div>
  ) : (
    children
  )

  return (
    <motion.section
      className={cn('relative', className)}
      initial={false}
      animate={{
        minHeight: fullViewport ? '95dvh' : 'auto',
      }}
      transition={{
        duration: 1,
        ease: [0.32, 0.72, 0, 1],
      }}
      style={{
        ...style,
        paddingTop: hero ? '1rem' : '10rem',
        paddingBottom: isMobile && hero ? '5rem' : '10rem',
      }}
      {...props}
    >
      {content}
    </motion.section>
  )
}