1const navItems = ["Technology", "Threat Reports", "Industries", "Resources", "About Us"];
2
3const primaryActions = [
4  { label: "Request demo", variant: "primary" },
5  { label: "Learn More", variant: "secondary" },
6];
7
8export const CyberNestHero = () => {
9  return (
10    <section className="mx-auto flex min-h-[85vh] w-full max-w-svw flex-col rounded-[28px] bg-white px-5 py-6 sm:min-h-screen sm:px-8 sm:py-8 lg:px-12 lg:py-10 xl:px-14">
11      <header className="flex flex-wrap items-center justify-between gap-4 sm:gap-6">
12        <div className="flex items-center gap-3 text-sm font-semibold text-slate-900">
13          <span className="inline-flex size-9 items-center justify-center rounded-full bg-[#f1f1ef]">
14            <svg viewBox="0 0 32 32" className="h-5 w-5 text-slate-900" fill="currentColor" aria-hidden="true">
15              <path d="M5.6 7.1 14 2.2v9.7L5.6 7.1Zm11.4-4.9 9.1 5.2-9.1 4.8V2.2Zm0 13.4 9.1-4.8v10.5l-9.1 4.6V15.6Zm-3 10.3-8.4-4.8V10.6l8.4 4.9v10.4Z" />
16            </svg>
17          </span>
18          CyberNest
19        </div>
20        <nav className="hidden items-center gap-8 text-xs font-semibold text-slate-700 md:flex">
21          {navItems.map((item) => (
22            <span key={item} className="inline-flex items-center gap-1">
23              {item}
24              {item === "Industries" && (
25                <svg viewBox="0 0 12 12" className="h-3 w-3 text-slate-500" fill="currentColor" aria-hidden="true">
26                  <path d="m3 4.5 3 3 3-3H3Z" />
27                </svg>
28              )}
29            </span>
30          ))}
31        </nav>
32        <button className="rounded-full bg-black px-4 py-2 text-xs font-semibold text-white">
33          Request demo
34        </button>
35      </header>
36
37      <div className="grid flex-1 grid-cols-1 gap-10 pt-8 lg:grid-cols-[1.05fr_1fr] lg:gap-12 lg:pt-12">
38        <div className="flex flex-col items-start justify-end pb-6 sm:pb-8 lg:pb-10">
39          <div className="space-y-6 sm:space-y-7">
40            <div>
41              <h1 className="max-w-3xl font-serif text-3xl leading-tight text-slate-900 sm:text-5xl lg:text-[54px]">
42                Safeguard your business
43                <br />
44                with intelligent <span className="text-[#a6a6a6]">and</span>
45                <br />
46                <span className="text-[#a6a6a6]">automated security</span> 
47              </h1>
48              <p className="mt-5 max-w-sm text-xs text-muted-foreground sm:text-sm">
49                Automate infrastructure setup, deployments, and scaling without writing endless scripts.
50              </p>
51            </div>
52
53            <div className="flex flex-wrap items-center gap-3">
54              {primaryActions.map((action) => (
55                <button
56                  key={action.label}
57                  className={
58                    action.variant === "primary"
59                      ? "w-full rounded-full bg-black px-5 py-2.5 text-xs font-semibold text-white sm:w-auto"
60                      : "w-full rounded-full border border-slate-200 bg-white px-5 py-2.5 text-xs font-semibold text-slate-700 sm:w-auto"
61                  }
62                >
63                  {action.label}
64                </button>
65              ))}
66            </div>
67          </div>
68        </div>
69
70        <div className="relative min-h-65 rounded-3xl bg-white sm:min-h-90 lg:min-h-120">
71          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.85),rgba(255,255,255,0)_55%),linear-gradient(135deg,rgba(245,245,245,0.9),rgba(255,255,255,0.2))]" />
72          <div className="absolute inset-0 bg-[linear-gradient(135deg,rgba(17,17,17,0.08)_1px,transparent_1px),linear-gradient(45deg,rgba(17,17,17,0.08)_1px,transparent_1px)] bg-size-[30px_30px] opacity-80" />
73          <div className="absolute inset-0 bg-[url('/image.png')] bg-cover bg-center opacity-95" />
74        </div>
75      </div>
76    </section>
77  );
78};
79