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 hls.js and 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";

export default function 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>
  );
}

Dependencies

npm

hls.jslucide-react