# NexaCore

> Light enterprise-infrastructure landing page: a floating pill navbar that shrinks on scroll, a full-screen video hero, a dark service-card grid that unfolds on hover, a chaos-versus-control split around a circular streaming video, and a four-pillar delivery staircase. Self-contained navy-and-lavender palette with multi-stop brand gradients, driven by lucide-react.

A shadcn/ui block from the [@hirael](https://hirael.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/hirael/nexacore).

- Page, with a live preview: https://shadcn.exchange/r/hirael/nexacore
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/hirael/nexacore-light-f479b81525cf6a23.png
- Registry item: https://hirael.com/r/nexacore.json
- Categories: templates
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://hirael.com/r/nexacore.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `button`

## Files

### `registry/hirael/bases/radix/templates/nexacore/nexacore.tsx`

```tsx
// NexaCore from Hirael <https://hirael.com/templates/nexacore>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { cn } from '@/lib/utils';

import { jakarta } from './fonts';
import { Freedom } from './freedom';
import { Hero } from './hero';
import { Navbar } from './navbar';
import { NexacoreStyles } from './styles';
import { Precision } from './precision';
import { Trusted } from './trusted';

const Nexacore = () => {
  return (
    <div
      className={cn(
        'nexacore',
        jakarta.variable,
        'relative min-h-svh bg-background text-foreground antialiased',
        '[font-family:var(--font-nexacore-sans),ui-sans-serif,system-ui,sans-serif]',
      )}
    >
      <NexacoreStyles />
      <main>
        <Navbar />
        <Hero />
        <Trusted />
        <Freedom />
        <Precision />
      </main>
    </div>
  );
};

export default Nexacore;
```

### `registry/hirael/bases/radix/templates/nexacore/navbar.tsx`

```tsx
// NexaCore from Hirael <https://hirael.com/templates/nexacore>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

'use client';

import * as React from 'react';
import { Menu, Search, X } from 'lucide-react';

import { cn } from '@/lib/utils';
import { Button } from '@/registry/hirael/bases/radix/ui/button';

import { ContactButton, Logo, useScrolled } from './primitives';

const NAV_LINKS = [
  { label: 'What We Build', href: '#build' },
  { label: 'Our Method', href: '#method' },
  { label: 'Who We Are', href: '#about' },
  { label: 'Thinking', href: '#thinking' },
];

export const Navbar = () => {
  const scrolled = useScrolled(20);
  const [open, setOpen] = React.useState(false);

  return (
    <header data-slot="navbar" className="fixed inset-x-0 top-4 z-50 flex justify-center ps-4 pe-1.5">
      <nav
        className={cn(
          'w-full rounded-2xl bg-white shadow-lg transition-all duration-500 ease-in-out',
          scrolled ? 'max-w-3xl' : 'max-w-6xl',
        )}
      >
        <div
          className={cn(
            'flex items-center justify-between gap-6 py-1.5 transition-all duration-500 ease-in-out',
            scrolled ? 'ps-4 pe-2' : 'ps-5 pe-2',
          )}
        >
          <a href="#home" className="flex items-center gap-2">
            <Logo />
            <span className="text-[22px] font-medium tracking-[-0.02em] text-[var(--nexa-navy)]">NexaCore</span>
          </a>

          <div className={cn('hidden items-center md:flex', scrolled ? 'gap-0' : 'gap-1')}>
            {NAV_LINKS.map((link) => (
              <a
                key={link.label}
                href={link.href}
                className={cn(
                  'rounded-xl text-sm text-[var(--nexa-navy)] transition-all duration-500 hover:bg-foreground/5',
                  scrolled ? 'px-2 py-1.5' : 'px-4 py-2',
                )}
              >
                {link.label}
              </a>
            ))}
          </div>

          <div className="flex items-center gap-2">
            <Button type="button" variant="ghost" size="icon-lg" aria-label="Search">
              <Search className="size-5 text-[var(--nexa-navy)]" />
            </Button>
            <div className="hidden md:block">
              <ContactButton />
            </div>
            <Button
              type="button"
              variant="ghost"
              size="icon-lg"
              aria-label={open ? 'Close menu' : 'Open menu'}
              aria-expanded={open}
              onClick={() => setOpen((v) => !v)}
              className="md:hidden"
            >
              {open ? (
                <X className="size-5 text-[var(--nexa-navy)]" />
              ) : (
                <Menu className="size-5 text-[var(--nexa-navy)]" />
              )}
            </Button>
          </div>
        </div>

        {open ? (
          <div className="flex flex-col items-center gap-1 border-t border-border px-4 pt-2 pb-3 md:hidden">
            {NAV_LINKS.map((link) => (
              <a
                key={link.label}
                href={link.href}
                onClick={() => setOpen(false)}
                className="w-full rounded-xl py-2 text-center text-sm text-[var(--nexa-navy)] transition-colors hover:bg-foreground/5"
              >
                {link.label}
              </a>
            ))}
            <div className="mt-1 flex w-full items-center gap-2">
              <Button type="button" variant="ghost" size="icon-lg" aria-label="Search">
                <Search className="size-5 text-[var(--nexa-navy)]" />
              </Button>
              <ContactButton className="flex-1" />
            </div>
          </div>
        ) : null}
      </nav>
    </header>
  );
};
```

### `registry/hirael/bases/radix/templates/nexacore/hero.tsx`

```tsx
// NexaCore from Hirael <https://hirael.com/templates/nexacore>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { GradientText } from './primitives';

const HERO_VIDEO = 'https://hirael.com/media/templates/nexacore/hero.mp4';

export const Hero = () => {
  return (
    <section
      id="home"
      data-slot="hero"
      className="relative flex min-h-svh items-center justify-center overflow-hidden px-4"
    >
      <video
        className="absolute inset-0 h-full w-full object-cover"
        src={HERO_VIDEO}
        autoPlay
        muted
        loop
        playsInline
        aria-hidden
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-48 bg-[linear-gradient(to_bottom,transparent,#000201)]"
      />

      <div className="relative z-10 flex max-w-2xl flex-col items-center gap-6 text-center">
        <GradientText className="text-lg font-medium">Infrastructure Built to Last</GradientText>

        <h1 className="text-[length:clamp(32px,4vw,56px)] leading-tight font-medium text-white md:whitespace-nowrap">
          Engineer and scale with clarity.
        </h1>

        <p className="text-[length:clamp(15px,1.2vw,20px)] text-[var(--nexa-lavender)]">
          NexaCore helps infrastructure owner, operator and supplier teams enforce global build standards for
          mission-critical systems. Align teams, regions and programs without the heavy lifting.
        </p>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/nexacore/trusted.tsx`

```tsx
// NexaCore from Hirael <https://hirael.com/templates/nexacore>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { GradientText } from './primitives';
import { ServiceCard, type ServiceCardProps } from './service-card';

const TRUSTED_BG = 'https://hirael.com/media/templates/nexacore/trusted-bg.webp';

const CARDS: ServiceCardProps[] = [
  {
    label: 'Planning',
    level: 1,
    title: 'Turn new programs into structured plans without the noise.',
    bullets: ['Embedded program leads', 'Decision-ready roadmaps'],
  },
  {
    label: 'Procurement',
    level: 2,
    title: 'Source and qualify vendors with far less friction.',
    bullets: ['Cross-org scope alignment', 'End-to-end accountability'],
  },
  {
    label: 'Logistics',
    level: 3,
    title: 'Move the right materials on time without surprises.',
    bullets: ['Spec and fit validations', 'Change order ownership'],
  },
  {
    label: 'Commissioning',
    level: 4,
    title: 'Activate systems with complete context, not guesswork.',
    bullets: ['Uninterrupted workflows', 'Verified clean handoffs'],
  },
];

export const Trusted = () => {
  return (
    <section
      id="build"
      data-slot="trusted"
      className="relative flex flex-col items-center gap-[110px] bg-cover bg-center px-[clamp(16px,4vw,40px)] pt-[clamp(100px,12vw,180px)] pb-[clamp(100px,12vw,160px)]"
      style={{ backgroundImage: `url(${TRUSTED_BG})` }}
    >
      <div className="flex w-full max-w-[1200px] flex-col items-center gap-5 text-center">
        <h2 className="text-[length:clamp(32px,4vw,56px)] leading-[1.2] font-medium text-white">
          Relied on by enterprise teams
          <br />
          <GradientText>from groundbreak to go-live.</GradientText>
        </h2>
        <p className="text-[length:clamp(14px,1.25vw,18px)] text-[var(--nexa-lavender-2)]">
          Built for operational clarity through constant change. Proven across 530+ MW of critical infrastructure.
        </p>
      </div>

      <div className="grid w-full max-w-[1200px] grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {CARDS.map((card) => (
          <ServiceCard key={card.label} {...card} />
        ))}
      </div>

      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 bottom-0 h-[180px] bg-[linear-gradient(to_bottom,transparent,rgb(255,255,255))]"
      />
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/nexacore/service-card.tsx`

```tsx
// NexaCore from Hirael <https://hirael.com/templates/nexacore>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { ArrowRight } from 'lucide-react';

import { cn } from '@/lib/utils';
import { Button } from '@/registry/hirael/bases/radix/ui/button';

interface ServiceIconProps {
  level: number;
}

const ServiceIcon = ({ level }: ServiceIconProps) => {
  return (
    <svg viewBox="0 0 16 16" fill="none" aria-hidden className="h-[17px] w-[17px] shrink-0 text-[var(--nexa-accent)]">
      <circle cx="8" cy="8" r="6.2" stroke="currentColor" strokeWidth="1.3" />
      {level >= 2 ? <circle cx="11.5" cy="4.5" r="2" fill="currentColor" /> : null}
      {level >= 3 ? <circle cx="4" cy="11" r="3" fill="currentColor" /> : null}
      {level >= 4 ? <circle cx="12" cy="12" r="4" fill="currentColor" /> : null}
    </svg>
  );
};

const Bullet = () => {
  return (
    <svg viewBox="0 0 16 16" fill="none" aria-hidden className="mt-1.5 h-3.5 w-3.5 shrink-0 text-[var(--nexa-accent)]">
      <circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeWidth="1.2" />
      <circle cx="8" cy="8" r="2.5" fill="currentColor" />
    </svg>
  );
};

export interface ServiceCardProps {
  label: string;
  level: number;
  title: string;
  bullets: string[];
}

export const ServiceCard = ({ label, level, title, bullets }: ServiceCardProps) => {
  return (
    <div
      data-slot="service-card"
      className="nexa-blur-card group relative flex h-[clamp(320px,32vw,500px)] cursor-pointer flex-col overflow-hidden rounded-[36px] bg-[var(--nexa-card-dark)]"
    >
      <div
        aria-hidden
        className="absolute inset-x-0 top-0 z-[1] h-[55%] translate-y-[-30%] bg-[radial-gradient(120%_90%_at_50%_0%,rgba(200,111,255,0.45),transparent_70%),linear-gradient(160deg,rgba(28,78,255,0.35),rgba(10,5,20,0)_60%)] opacity-70 transition-all duration-500 group-hover:translate-y-0 group-hover:opacity-100"
      />
      <div
        aria-hidden
        className="absolute inset-x-0 bottom-0 z-[1] h-[55%] translate-y-full bg-[linear-gradient(to_top,rgba(10,5,20,0.95)_60%,transparent)] opacity-0 transition-all duration-500 group-hover:translate-y-0 group-hover:opacity-100"
      />

      <div className="relative z-[2] flex h-full flex-col px-[clamp(18px,2.36vw,36px)] py-[clamp(16px,1.94vw,32px)]">
        <span
          data-slot="service-card-badge"
          className="inline-flex w-fit shrink-0 items-center gap-2 rounded-full bg-[var(--nexa-badge)] px-[clamp(10px,1.25vw,20px)] py-[clamp(6px,0.7vw,12px)] text-white [&>svg]:size-[17px]"
        >
          <ServiceIcon level={level} />
          <span className="text-[length:clamp(12px,0.97vw,15px)]">{label}</span>
        </span>

        <div className="flex-grow" />

        <h3 className="text-[length:clamp(16px,1.7vw,24px)] leading-snug font-medium text-white transition-transform duration-500 group-hover:-translate-y-2">
          {title}
        </h3>

        <ul className="mt-4 flex flex-col gap-2.5">
          {bullets.map((bullet) => (
            <li
              key={bullet}
              className="flex items-start gap-2 text-[length:clamp(12px,1vw,15px)] text-[var(--nexa-lavender-2)]"
            >
              <Bullet />
              <span>{bullet}</span>
            </li>
          ))}
        </ul>

        <div
          className={cn(
            'max-h-0 translate-y-5 overflow-hidden opacity-0 transition-all duration-500',
            'group-hover:max-h-20 group-hover:translate-y-0 group-hover:opacity-100',
          )}
        >
          <Button
            type="button"
            className="mt-4 h-auto w-full"
            style={{
              padding: 'clamp(10px, 0.9vw, 14px) 0',
              fontSize: 'clamp(13px, 1.1vw, 16px)',
            }}
          >
            Learn more
            <ArrowRight className="size-4 rtl:-scale-x-100" />
          </Button>
        </div>
      </div>
    </div>
  );
};
```

### `registry/hirael/bases/radix/templates/nexacore/freedom.tsx`

```tsx
// NexaCore from Hirael <https://hirael.com/templates/nexacore>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import type { ReactNode } from 'react';
import { Check, X } from 'lucide-react';

import { cn } from '@/lib/utils';

import { GradientText } from './primitives';

const FREEDOM_VIDEO = 'https://hirael.com/media/templates/nexacore/freedom.mp4';

const NEGATIVES = [
  'Reactive firefighting when foundational issues surface too late',
  'Bloated coordination overhead drains bandwidth from core teams',
  "Constant re-verification because source data can't be trusted",
  'Fragmented vendor relations produce mismatched deliverables',
  'Scattered specs and decisions buried across siloed systems',
];

const POSITIVES = [
  'Layered dependency maps eliminate costly surprises at every phase',
  'Streamlined team handoffs deliver production-ready outcomes fast',
  'Live validation loops keep requirements locked across all stages',
  'Unified vendor management through a single accountable contact',
  'Centralized context and clear records accelerate every decision',
];

const ControlGlyph = () => {
  return (
    <svg width="19" height="18" viewBox="0 0 17 16" fill="none" aria-hidden className="shrink-0">
      <path
        d="M8.5 14C8.5 14 1.5 9.8 1.5 5.4C1.5 3.2 3.2 1.8 5 1.8C6.5 1.8 7.8 2.8 8.5 4C9.2 2.8 10.5 1.8 12 1.8C13.8 1.8 15.5 3.2 15.5 5.4C15.5 9.8 8.5 14 8.5 14Z"
        fill="var(--primary)"
      />
    </svg>
  );
};

interface PointRowProps {
  children: ReactNode;
  positive?: boolean;
}

const PointRow = ({ children, positive }: PointRowProps) => {
  return (
    <div className="nexa-soft-shadow flex items-center gap-3 rounded-[18px] bg-white px-[clamp(14px,1.25vw,20px)] py-[clamp(12px,0.97vw,16px)]">
      <span className="flex size-[clamp(16px,1.25vw,20px)] shrink-0 items-center justify-center">
        {positive ? (
          <Check className="size-full text-[var(--nexa-blue)]" strokeWidth={2.5} />
        ) : (
          <X className="size-full text-[var(--nexa-lavender-3)]" strokeWidth={2.5} />
        )}
      </span>
      <span
        className={cn(
          'text-[length:clamp(13px,1.15vw,17px)]',
          positive ? 'text-[var(--nexa-navy)]' : 'text-[var(--nexa-lavender-3)]',
        )}
      >
        {children}
      </span>
    </div>
  );
};

export const Freedom = () => {
  return (
    <section
      id="method"
      data-slot="freedom"
      className="flex flex-col items-center gap-[36px] bg-white px-[clamp(16px,3vw,40px)] py-[clamp(48px,6vw,80px)]"
    >
      <div className="flex flex-col items-center gap-9 text-center">
        <span className="inline-flex items-center gap-2 rounded-full bg-[var(--nexa-chip)] px-[1.25vw] py-[0.9vw] text-[18px] font-medium text-[var(--nexa-navy)]">
          <ControlGlyph />
          Control
        </span>
        <h2 className="text-[length:clamp(32px,4vw,56px)] leading-[1.15] font-medium text-[var(--nexa-navy)]">
          Stop absorbing the chaos.
          <br />
          <GradientText className="inline-block pb-[0.3vw]">Run with confidence.</GradientText>
        </h2>
      </div>

      <div className="flex w-full grid-cols-[26vw_1fr_26vw] flex-col items-center gap-x-[36px] gap-y-[24px] px-[clamp(0px,2.92vw,40px)] lg:grid lg:items-start">
        <div className="order-2 flex w-full flex-col gap-[12px] lg:order-none">
          {NEGATIVES.map((text) => (
            <PointRow key={text}>{text}</PointRow>
          ))}
        </div>

        <div className="order-first flex w-full justify-center lg:order-none">
          <div className="relative size-[clamp(200px,22vw,400px)] overflow-hidden rounded-[50%]">
            <video
              src={FREEDOM_VIDEO}
              autoPlay
              loop
              muted
              playsInline
              aria-hidden
              className="absolute top-1/2 left-1/2 h-[160%] w-[160%] -translate-x-1/2 -translate-y-1/2 object-cover"
            />
          </div>
        </div>

        <div className="order-3 flex w-full flex-col gap-[12px] lg:order-none">
          {POSITIVES.map((text) => (
            <PointRow key={text} positive>
              {text}
            </PointRow>
          ))}
        </div>
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/nexacore/precision.tsx`

```tsx
// NexaCore from Hirael <https://hirael.com/templates/nexacore>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { BrandMark, GradientText } from './primitives';

const PRECISION_BG = 'https://hirael.com/media/templates/nexacore/precision-bg.webp';

interface Pillar {
  label: string;
  start: number;
  bottom: number;
  items: string[];
}

const PILLARS: Pillar[] = [
  {
    label: 'Scopes',
    start: 2.8,
    bottom: 7,
    items: ['conditions', 'capacity', 'specs', 'timelines'],
  },
  {
    label: 'Integrates',
    start: 22.4,
    bottom: 9.08,
    items: ['civil', 'mechanical', 'electrical', 'controls'],
  },
  {
    label: 'Certifies',
    start: 41.2,
    bottom: 11.16,
    items: ['redundancy', 'testing', 'compliance', 'sign-offs'],
  },
  {
    label: 'Activates',
    start: 61.1,
    bottom: 13.24,
    items: ['cutover', 'runbooks', 'handoff', 'SLAs'],
  },
];

const DeliveryGlyph = () => {
  return (
    <svg width="19" height="18" viewBox="0 0 17 16" fill="none" aria-hidden className="shrink-0">
      <circle cx="8.5" cy="8" r="7" stroke="var(--primary)" strokeWidth="1.2" />
      <rect x="8" y="0" width="1" height="3" fill="var(--primary)" />
      <rect x="8" y="13" width="1" height="3" fill="var(--primary)" />
      <rect x="0" y="7.5" width="3" height="1" fill="var(--primary)" />
      <rect x="14" y="7.5" width="3" height="1" fill="var(--primary)" />
    </svg>
  );
};

interface PillarChipProps {
  label: string;
  small?: boolean;
}

const PillarChip = ({ label, small }: PillarChipProps) => {
  return (
    <span
      className="inline-flex items-center gap-2 rounded-[20px] bg-[linear-gradient(135deg,rgb(255,255,255),rgba(255,255,255,0.6))] font-medium text-[var(--nexa-navy)]"
      style={{
        fontSize: small ? 15 : 18,
        padding: small ? '10px 18px' : '0.972vw 1.736vw',
      }}
    >
      <BrandMark
        style={
          small
            ? { width: 16, height: 16 }
            : {
                width: '1.111vw',
                height: '1.111vw',
                minWidth: 16,
                minHeight: 16,
              }
        }
      />
      {label}
    </span>
  );
};

const DesktopStaircase = () => {
  return (
    <div className="relative hidden h-[31.94vw] w-[82.292vw] sm:block">
      {PILLARS.map((pillar) => (
        <div
          key={pillar.label}
          className="absolute flex flex-col items-center"
          style={{
            insetInlineStart: `${pillar.start}vw`,
            bottom: `${pillar.bottom}vw`,
          }}
        >
          <PillarChip label={pillar.label} />
          <div className="relative mt-[8px]">
            <div className="nexa-grad-line-bg h-[14.24vw] w-px" />
            <div className="absolute start-[1.94vw] top-[0.56vw] flex flex-col gap-[4px] text-[var(--nexa-navy)]">
              {pillar.items.map((item) => (
                <span key={item} className="px-[1.04vw] py-[0.69vw] text-[16px] whitespace-nowrap">
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

const MobileStack = () => {
  return (
    <div className="flex w-full flex-col gap-10 sm:hidden">
      {PILLARS.map((pillar, i) => {
        const end = i % 2 === 1;

        return (
          <div key={pillar.label} className={end ? 'flex flex-col items-end' : 'flex flex-col items-start'}>
            <PillarChip label={pillar.label} small />
            <div className="mt-4 flex gap-4" style={{ flexDirection: end ? 'row-reverse' : 'row' }}>
              <div className="nexa-grad-line-bg min-h-[120px] w-px shrink-0" />
              <div className="flex flex-col" style={{ alignItems: end ? 'flex-end' : 'flex-start' }}>
                {pillar.items.map((item) => (
                  <span key={item} className="py-[8px] text-[14px] text-[rgb(100,80,160)]">
                    {item}
                  </span>
                ))}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export const Precision = () => {
  return (
    <section
      id="thinking"
      data-slot="precision"
      className="flex flex-col items-center gap-[clamp(32px,4vw,56px)] bg-cover bg-center bg-no-repeat px-[clamp(16px,4vw,60px)] pt-[clamp(48px,8vw,120px)] pb-[clamp(48px,5.56vw,80px)] text-center"
      style={{ backgroundImage: `url(${PRECISION_BG})` }}
    >
      <div className="flex flex-col items-center">
        <span className="inline-flex items-center gap-2 rounded-[36px] bg-[rgb(249,249,249)] px-[clamp(12px,1.25vw,20px)] py-[clamp(8px,0.9vw,14px)] text-[length:clamp(14px,1.1vw,18px)] font-medium text-[var(--nexa-navy)]">
          <DeliveryGlyph />
          Structured Delivery
        </span>

        <h2 className="mt-[22px] max-w-[clamp(700px,60vw,900px)] text-[length:clamp(28px,4vw,56px)] leading-[1.15] font-medium text-[var(--nexa-navy)]">
          <span className="block sm:whitespace-nowrap">One integrated, end-to-end system.</span>
          <GradientText className="block pb-[0.3vw]">Compounding operational value.</GradientText>
        </h2>

        <p className="mt-6 text-[length:clamp(15px,1.2vw,20px)] text-[var(--nexa-lavender)]">
          NexaCore teams capture, align, validate and deliver exactly what keeps your programs on track.
        </p>
      </div>

      <div className="w-full max-w-[82.292vw]">
        <DesktopStaircase />
        <MobileStack />
      </div>
    </section>
  );
};
```

### `registry/hirael/bases/radix/templates/nexacore/primitives.tsx`

```tsx
// NexaCore from Hirael <https://hirael.com/templates/nexacore>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

'use client';

import * as React from 'react';

import { cn } from '@/lib/utils';

export const useScrolled = (threshold = 20) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > threshold);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });

    return () => window.removeEventListener('scroll', onScroll);
  }, [threshold]);

  return scrolled;
};

interface LogoProps {
  className?: string;
}

export const Logo = ({ className }: LogoProps) => {
  return (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden className={cn('shrink-0', className)}>
      <defs>
        <linearGradient id="nexacore-logo" x1="2" y1="2" x2="26" y2="26" gradientUnits="userSpaceOnUse">
          <stop stopColor="var(--chart-1)" />
          <stop offset="0.5" stopColor="var(--chart-2)" />
          <stop offset="1" stopColor="var(--chart-3)" />
        </linearGradient>
      </defs>
      <circle cx="14" cy="14" r="11" stroke="url(#nexacore-logo)" strokeWidth="2.5" />
    </svg>
  );
};

interface BrandMarkProps {
  className?: string;
  style?: React.CSSProperties;
}

export const BrandMark = ({ className, style }: BrandMarkProps) => {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden className={cn('shrink-0', className)} style={style}>
      <defs>
        <linearGradient id="nexacore-mark" x1="3" y1="3" x2="21" y2="21" gradientUnits="userSpaceOnUse">
          <stop stopColor="var(--chart-1)" />
          <stop offset="0.5" stopColor="var(--chart-2)" />
          <stop offset="1" stopColor="var(--chart-3)" />
        </linearGradient>
      </defs>
      <circle cx="12" cy="12" r="8.5" stroke="url(#nexacore-mark)" strokeWidth="1.8" />
      <circle cx="12" cy="12" r="3.2" fill="url(#nexacore-mark)" />
    </svg>
  );
};

interface GradientTextProps {
  children: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

export const GradientText = ({ children, className, style }: GradientTextProps) => {
  return (
    <span data-slot="gradient-text" className={cn('nexa-grad-text', className)} style={style}>
      {children}
    </span>
  );
};

interface ContactButtonProps {
  label?: string;
  href?: string;
  className?: string;
}

export const ContactButton = ({ label = 'Contact', href = '#', className }: ContactButtonProps) => {
  return (
    <a
      href={href}
      data-slot="contact-button"
      className={cn(
        'nexa-grad-a-bg group relative inline-flex items-center justify-center rounded-xl p-px outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
        className,
      )}
    >
      <span className="w-full rounded-[11px] bg-primary px-7 py-3 text-center text-base text-primary-foreground transition-colors duration-300 group-hover:bg-transparent">
        {label}
      </span>
    </a>
  );
};
```

### `registry/hirael/bases/radix/templates/nexacore/styles.tsx`

```tsx
// NexaCore from Hirael <https://hirael.com/templates/nexacore>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

const NEXACORE_CSS = `
.nexacore {
  --background: #ffffff;
  --foreground: rgb(26, 11, 84);
  --card: #ffffff;
  --card-foreground: rgb(26, 11, 84);
  --popover: #ffffff;
  --popover-foreground: rgb(26, 11, 84);
  --primary: rgb(28, 78, 255);
  --primary-foreground: #ffffff;
  --secondary: rgb(249, 249, 249);
  --secondary-foreground: rgb(26, 11, 84);
  --muted: rgb(249, 249, 249);
  --muted-foreground: rgb(169, 151, 206);
  --accent: rgb(249, 249, 249);
  --accent-foreground: rgb(26, 11, 84);
  --border: rgb(232, 228, 243);
  --input: rgb(232, 228, 243);
  --ring: rgb(28, 78, 255);
  --nexa-navy: rgb(26, 11, 84);
  --nexa-lavender: rgb(169, 151, 206);
  --nexa-lavender-2: rgb(189, 174, 231);
  --nexa-lavender-3: rgb(131, 121, 158);
  --nexa-accent: rgb(200, 111, 255);
  --nexa-blue: rgb(28, 78, 255);
  --nexa-chip: rgb(249, 249, 249);
  --nexa-card-dark: rgba(10, 5, 20, 0.88);
  --nexa-badge: rgb(41, 31, 57);
  --nexa-grad-a: linear-gradient(90deg, rgb(28, 78, 255), rgb(172, 36, 255) 50%, rgb(254, 136, 27));
  --nexa-grad-b: linear-gradient(90deg, rgb(43, 167, 255), rgb(202, 69, 255) 50%, rgb(254, 136, 27));
  --nexa-grad-line: linear-gradient(rgb(28, 78, 255), rgb(254, 136, 27) 0%, rgb(172, 36, 255) 25%, rgb(247, 159, 255) 50%, rgb(255, 214, 0) 66%, rgb(254, 136, 27) 84%, rgba(254, 136, 27, 0) 102%);
}
.nexacore .nexa-grad-text {
  background-image: var(--nexa-grad-b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.nexacore .nexa-grad-a-bg {
  background-image: var(--nexa-grad-a);
}
.nexacore .nexa-grad-line-bg {
  background-image: var(--nexa-grad-line);
}
.nexacore .nexa-soft-shadow {
  box-shadow: 0 3px 9.1px rgba(63, 74, 126, 0.05), 0 1px 29px rgba(63, 74, 126, 0.1);
}
.nexacore .nexa-blur-card {
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
}
`;

export const NexacoreStyles = () => {
  return <style dangerouslySetInnerHTML={{ __html: NEXACORE_CSS }} />;
};
```

### `registry/hirael/bases/radix/templates/nexacore/fonts.ts`

```ts
// NexaCore from Hirael <https://hirael.com/templates/nexacore>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import { Plus_Jakarta_Sans } from 'next/font/google';

export const jakarta = Plus_Jakarta_Sans({
  variable: '--font-nexacore-sans',
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
  display: 'swap',
});
```