Skip to content
38

AKOR

Dark landing page for an intelligent-security firm: a fixed uppercase navbar, a full-screen video hero with copy anchored bottom-start, an inverted near-white services band with a 2x2 numbered card grid, a black about split with a looping video beside a heading-and-mission column, and a simple footer. Self-contained charcoal palette with a vivid green primary, Sora type, CSS entrances only.

Preview

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

Installation

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

Code

components/templates/akor/akor.tsx
import { cn } from '@/lib/utils';

import { About } from './about';
import { sora } from './fonts';
import { Footer } from './footer';
import { Hero } from './hero';
import { Navbar } from './navbar';
import { Services } from './services';
import { AkorStyles } from './styles';

const Akor = () => {
  return (
    <div
      className={cn(
        'akor',
        sora.variable,
        'relative min-h-svh bg-background [font-family:var(--font-akor-sans),ui-sans-serif,sans-serif] text-foreground antialiased',
      )}
    >
      <AkorStyles />
      <Navbar />
      <Hero />
      <Services />
      <About />
      <Footer />
    </div>
  );
};

export default Akor;

Dependencies

shadcn registry

button

npm

lucide-react

Shipped