Skip to content
38

Prism

Dark, liquid-glass landing page for an AI web design agency: a fixed glass pill nav, a full-screen video hero whose headline blurs in word by word over a partners row, a video-backed how-it-works statement, alternating feature rows with looping media, a four-card benefits grid, a stats band over a desaturated video, three testimonials and a video call to action that carries the footer. Self-contained pure-black palette, Barlow + Instrument Serif type, CSS entrances only.

Preview

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

Installation

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

Code

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

import { Benefits } from './benefits';
import { Cta } from './cta';
import { Features } from './features';
import { barlow, instrumentSerif } from './fonts';
import { Hero } from './hero';
import { Navbar } from './navbar';
import { Process } from './process';
import { Stats } from './stats';
import { PrismStyles } from './styles';
import { Testimonials } from './testimonials';

const Prism = () => {
  return (
    <div
      className={cn(
        'prism',
        barlow.variable,
        instrumentSerif.variable,
        'relative min-h-svh bg-background text-foreground antialiased',
        '[font-family:var(--font-prism-sans),ui-sans-serif,sans-serif]',
      )}
    >
      <PrismStyles />
      <Navbar />
      <Hero />
      <Process />
      <Features />
      <Benefits />
      <Stats />
      <Testimonials />
      <Cta />
    </div>
  );
};

export default Prism;

Dependencies

shadcn registry

button

npm

lucide-react

Shipped