Skip to content
6

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.

Preview

Installation

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

Code

components/templates/nexacore/nexacore.tsx
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')}
      style={{
        fontFamily: 'var(--font-nexacore-sans), ui-sans-serif, system-ui, sans-serif',
      }}
    >
      <NexacoreStyles />
      <main>
        <Navbar />
        <Hero />
        <Trusted />
        <Freedom />
        <Precision />
      </main>
    </div>
  );
};

export default Nexacore;

Dependencies

shadcn registry

badgebutton

npm

lucide-react