هیرو با تصویرِ محصول

"use client"

import { ArrowUpIcon } from "@/components/icons"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { stockImages } from "@/lib/stock-images"

/**
 * هیرو با تصویرِ محصول: تیتر و دو دکمهٔ وسط‌چین، و زیرشان تصویرِ بزرگِ محصول در قابِ
 * مرورگر که لبهٔ پایینش در بخشِ بعد محو می‌شود. برای SaaS و ابزارهای وب.
 */
export default function HeroProductBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <section className="relative overflow-hidden bg-subtle px-4 pt-20 sm:px-6 sm:pt-28">
        <div className="mx-auto flex max-w-3xl flex-col items-center gap-6 text-center">
          <Badge variant="soft" color="violet">
            داشبوردِ تازه منتشر شد
          </Badge>
          <h1 className="text-4xl leading-snug font-black text-balance sm:text-6xl sm:leading-snug">همهٔ اعدادِ کسب‌وکارت، روی یک صفحه</h1>
          <p className="max-w-xl text-lg leading-8 text-muted-foreground">فروش، هزینه و موجودی را زنده ببین و قبل از اینکه دیر شود تصمیم بگیر.</p>
          <div className="mt-2 flex flex-wrap justify-center gap-3">
            <Button>شروعِ رایگان</Button>
            <Button variant="outline">
              تماشای دمو
              <ArrowUpIcon className="rotate-45 rtl:-rotate-45" />
            </Button>
          </div>
        </div>
        <div className="relative mx-auto mt-16 max-w-5xl">
          <div className="overflow-hidden rounded-t-xl border border-b-0 border-border bg-card shadow-card">
            <div aria-hidden className="flex items-center gap-2 border-b border-border px-4 py-3">
              <span className="size-3 rounded-full bg-[var(--dig-red-400)]" />
              <span className="size-3 rounded-full bg-[var(--dig-orange-400)]" />
              <span className="size-3 rounded-full bg-[var(--dig-green-400)]" />
              <span className="mx-auto h-6 w-1/2 rounded-md bg-muted" />
            </div>
            {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
            <img src={stockImages.projectDashboard.src} alt={stockImages.projectDashboard.alt} className="aspect-[16/9] w-full object-cover" />
          </div>
          <div aria-hidden className="absolute inset-x-0 bottom-0 h-32 bg-linear-to-t from-[var(--subtle)] to-transparent" />
        </div>
      </section>
    </ControlSizeProvider>
  )
}