import * as React from "react" import { cn } from "@/lib/utils" import { ChevronRight } from "lucide-react" interface HeroSectionProps extends React.HTMLAttributes { title?: string subtitle?: { regular: string gradient: string } description?: string ctaText?: string ctaHref?: string bottomImage?: { light: string dark: string } gridOptions?: { angle?: number cellSize?: number opacity?: number lightLineColor?: string darkLineColor?: string } } const RetroGrid = ({ angle = 65, cellSize = 60, opacity = 0.5, lightLineColor = "gray", darkLineColor = "gray", }) => { const gridStyles = { "--grid-angle": `${angle}deg`, "--cell-size": `${cellSize}px`, "--opacity": opacity, "--light-line": lightLineColor, "--dark-line": darkLineColor, } as React.CSSProperties return (

) } const HeroSection = React.forwardRef( ( { className, title = "Build products for everyone", subtitle = { regular: "Designing your projects faster with ", gradient: "the largest figma UI kit.", }, description = "Sed ut perspiciatis unde omnis iste natus voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.", ctaText = "Browse courses", ctaHref = "#", bottomImage = { light: "https://farmui.vercel.app/dashboard-light.png", dark: "https://farmui.vercel.app/dashboard.png", }, gridOptions, ...props }, ref, ) => { return (

{title}

{subtitle.regular} {subtitle.gradient}

{description}

{ctaText}

{bottomImage && (

)}

) }, ) HeroSection.displayName = "HeroSection" export { HeroSection }