Hero

import * as React from "react"
import { ArrowRight, Copy, Sparkles } from "lucide-react"
import "@/components/designos/designos.css"

export function Hero({ eyebrow = "DesignOS · Created by h4rithd", title = "Build interfaces with a point of view.", description = "A source-first system of precise components, composed motion, and atmospheric backgrounds.", primaryHref = "#components", secondaryHref = "#install" }: { eyebrow?: string; title?: string; description?: string; primaryHref?: string; secondaryHref?: string }) {
  return <section className="dos-hero dos-background dos-bg-grid dos-bg-scan"><div className="dos-reveal"><div className="dos-eyebrow">{eyebrow}</div><h1 className="dos-display">{title}</h1><p className="dos-lead">{description}</p><div className="dos-actions"><a className="dos-button" href={primaryHref}>Explore components <ArrowRight aria-hidden="true" /></a><a className="dos-button dos-button--secondary" href={secondaryHref}><Copy aria-hidden="true" />Install DesignOS</a></div></div><div className="dos-demo-window dos-reveal" style={{ animationDelay: "100ms" }}><div className="dos-demo-window__bar"><span className="dos-demo-window__dot" /><span className="dos-demo-window__dot" /><span className="dos-demo-window__dot" /><span style={{ marginLeft: "auto" }}>SYSTEM / READY</span></div><div style={{ padding: 28, display: "grid", gap: 12 }}><span className="dos-badge dos-badge--success">Production ready</span><div className="dos-card"><div className="dos-card__body"><span className="dos-feature__icon"><Sparkles aria-hidden="true" /></span><h2 style={{ fontSize: 22, margin: "24px 0 8px" }}>Owned source. Signature finish.</h2><p className="dos-card__description">Install only what you need, then make every line yours.</p></div></div><div className="dos-skeleton" style={{ width: "76%" }} /><div className="dos-skeleton" style={{ width: "52%" }} /></div></div></section>
}