Handcrafted component library with Ready-made sections

import { ArrowRightIcon, ClipboardListIcon, SirenIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

const features = [
  {
    icon: ClipboardListIcon,
    title: "Asks for what is missing",
    description:
      "Oslow asks the reporter for steps, a recording or a log file before the ticket ever reaches you.",
  },
  {
    icon: SirenIcon,
    title: "Pages when it matters",
    description:
      "Reports that block sign-in or payments skip the queue and go straight to the engineer on call.",
  },
]

export function Features17() {
  return (
    <section className="overflow-hidden px-6 py-16 md:px-12 md:py-20">
      <div className="mx-auto flex w-full max-w-290 flex-col gap-10 md:flex-row md:items-center md:gap-16 lg:gap-20">
        <div className="flex flex-col gap-8 md:w-110 md:shrink-0">
          <div className="flex flex-col gap-4">
            <p className="text-sm font-medium text-muted-foreground">Triage</p>
            <div className="flex flex-col gap-4">
              <h2 className="text-4xl font-medium text-balance md:text-5xl lg:text-6xl">
                Every bug report arrives with what engineers ask for
              </h2>
              <p className="text-base text-pretty text-muted-foreground">
                Oslow asks for the missing steps, logs and recordings, then
                routes each report to the team that owns it.
              </p>
            </div>
          </div>
          <ul className="flex flex-col gap-4">
            {features.map((feature) => (
              <li key={feature.title} className="flex gap-2.5">
                <span className="flex h-6 shrink-0 items-center">
                  <feature.icon className="size-5" />
                </span>
                <div className="flex flex-col gap-1">
                  <h3 className="text-base font-medium">{feature.title}</h3>
                  <p className="text-sm text-muted-foreground">
                    {feature.description}
                  </p>
                </div>
              </li>
            ))}
          </ul>
          <Button
            size="lg"
            nativeButton={false}
            render={<a href="#" />}
            className="self-start"
          >
            See how triage works
            <ArrowRightIcon data-icon="inline-end" />
          </Button>
        </div>
        <div className="flex md:max-w-90 md:min-w-0 md:flex-1 lg:max-w-none">
          <img
            src="/images/features-17-bug-report.webp"
            alt="A bug report form with the team, severity, summary, what happened, two attachments and the on-call option"
            width={1280}
            height={1435}
            className="aspect-[640/717.3] w-full rounded-2xl shadow-lg ring-1 ring-border md:aspect-[535/600] md:w-133.75 md:max-w-none md:shrink-0 lg:aspect-[640/717.3] lg:w-full"
          />
        </div>
      </div>
    </section>
  )
}